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

Question

您好，我正在尝试捕获屏幕截图，将其转换为 PDF 并使用 ReactJS 应用程序下载。我创建了单击后应生成 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");

    })
  }

它 returns 我一个错误："Supplied Data is not a valid 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中的所有元素都设置了绝对位置，所以元素是空白的。我改为静态，效果很好。

Answer 2

我建议您使用 refs 而不是 document.getElementById("field")

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

Supplied Data is not a valid base64-String jsPDF in ReactJS

javascript

pdf

html2canvas

jspdf

reactjs