javascript - 提供的数据不是 ReactJS 中有效的 base64 字符串 jsPDF

Question

嗨，我正在 try catch 屏幕截图，将其放入 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");

    })
  }

它返回一个错误:“提供的数据不是有效的 base64 字符串 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

我鼓励您使用refs而不是 document.getElementById("field")