2

I have a react component containing a map (using react-leaflet).
I am trying to take a screenshot of the map (using html2canvas) on the client side, convert it to HTML and then send it to my NodeJS server for creating a PDF (using html-pdf).
The problem is that the map loads its tiles from external URLs so when I try to take a screenshot I get a blank background.

Here is the component I want to take screenshot of:
React map component

Here is the result in PDF:
screenshot image

The code I've used:
on the client side: 

// mapComponent is a div containing the component of the map.
let input = document.getElementById('mapComponent');
html2canvas(input)
    .then((canvas) => {
        let imgData = canvas.toDataURL('image/png');
        sendAjaxRequest(imgData);
    });

on the server: 

let html = '<!DOCTYPE html><html><head></head><body><div>' +
    '<img src="' + imgData + '">' +
    '</div></body></html>';

let options = {
        format: 'A4',
        orientation: 'portrait'
    };

pdf.create(html, options).toFile('./file.pdf', (err, res) => {
    });

Help will be much appreciated.

dev.RP
  • 21
  • 2
  • do the screenshot after the map has been loaded, [here's some infos](https://github.com/PaulLeCam/react-leaflet/blob/HEAD/docs/How%20it%20works.md) about `react-leaflet` lifecycle – FrontTheMachine Nov 07 '17 at 10:12
  • @FeMachine Thank you for your answer, but it still doesn't seem to work. I have separated the screenshot to happen when the component is loaded completely but ended up with same result - a blank background. – dev.RP Nov 07 '17 at 12:35
  • did you check all the disclaimers from the [package](https://www.npmjs.com/package/html2canvas)? maybe there's something you shouldn't do.. for example using sources from an external domain – FrontTheMachine Nov 07 '17 at 12:43

0 Answers0