ReactJS中提供的数据不是有效的base64-String jsPDF

Question

嗨，我正在尝试捕获屏幕快照，将其放入PDF并通过ReactJS Application下载。我创建了一种方法，单击后应生成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");

    })
  }

它返回一个错误：“提供的数据不是有效的base64-String jsPDF.convertStringToImageData”

这是我的渲染方法：

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>

    )
  }

我正在检查，generatePDF正确地给了我div，执行addImage时屏幕上出现问题。

Answer 1

问题是，因为div中的所有元素都设置了绝对位置，所以元素为空白。我更改为静态，并且可以正常运行。