Solution 1 :

I would encourage you to use refs instead of document.getElementById(“field”)

Solution 2 :

The problem was because, all elements in div have set position absolute, so elements was blank. I changed to static and it works perfectly.

Problem :

Hi i am trying to capture screenshoot, put it into PDF and download with ReactJS Application.
I’ve created method that after click should generate PDF:

generatePDF = () => {
    const printArea = document.getElementById("field")
    html2canvas(printArea).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF();
      pdf.addImage(imgData, 'PNG', 0, 0, 200, 200);"download.pdf");


It returns me an error: “Supplied Data is not a valid base64-String jsPDF.convertStringToImageData “

This is my render method:

render() {
    return (
        <div className="nav"></div>
        <div className="field" id="field">
        <button onClick={this.generatePDF} style={{ marginTop: 500 }}>Generate PDF</button>


I was checking, generatePDF properly gives me div, problem appears on screen when addImage is executing.


Comment posted by Titus

The problem is probably caused because

Comment posted by Marcin Warzybok

It shows me the same error, doesn’t work

Comment posted by addImage(..)

Are you sure that you’re getting the same error ? The documentation mentions that the first argument to

Comment posted by Marcin Warzybok

It’s the problem with position absolute, html2canvas has issues when element is blank.