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

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

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);
      pdf.save("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>
        <div className="nav"></div>
        <div className="field" id="field">
          {
            this.createTables()
          }
        </div>
        <button onClick={this.generatePDF} style={{ marginTop: 500 }}>Generate PDF</button>
      </div>

    )
  }

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