javascript - canvas.toDataURL() 没有返回完整的图像 - 它在顶部裁剪

Question

I am using canvas2html to convert one of my sections:


 <div className="plan-businessInfo" id="businessInfo-main">
          .
          .
          .
     //SOME JSX//
        </div>

成base64字符串。这是我正在使用的方法：

const onExportClick = e => {
    e.preventDefault();
    const businessInfo = document.getElementById("businessInfo-main");
    html2canvas(businessInfo).then(canvas => {
      const imgData = canvas.toDataURL();
      const doc = new jsPDF("p", "mm", "a4");
      console.log(imgData); // GETTING IMAGE string

      // GETTING PDF PAGE SIZE
      const widthPDF = doc.internal.pageSize.getWidth();
      const heightPDF = doc.internal.pageSize.getHeight();

        //ADDDING IMAGE WITH SIZE ON THE PDF PAGE
        doc.addImage(
          imgData,
          "png",
          0,
          0,
          widthPDF /**width */,
          heightPDF /**heigth */
        );


      doc.save("abc.pdf");
    });
  };

问题是图像在 PDF 中看起来很糟糕，而且 base64 字符串也不完整。

1. 以下是该部分在网站中的外观：

2. 以下是在线 base64-to-image 解析器如何显示图像 ( https://codebeautify.org/base64-to-image-converter )：

3. 这是它在 PDF 中的外观：

首先任何想法为什么base64字符串没有完成？额外的问题是如何在 PDF 已满时将其放入 PDF 中？

标签： javascripthtmlreactjsbase64html2canvas