如何在基于 React 的项目中从我的页面创建 PDF 文件？

Question

我尝试用html2canvas和jspdf制作这个 PDF 文件：

const input = document.getElementById('pdfTest')!;
html2canvas(input)
      .then((canvas) => {
           const imgData = canvas.toDataURL('image/png');
           const pdf = new jsPDF();
          * pdf.addImage(imgData, 'PNG', 0, 0);
           pdf.save("download.pdf");
      });

但在 * 行中，我收到此错误：

Unhandled Rejection (Error): Supplied Data is not a valid base64-String jsPDF.convertStringToImageData 

非常感谢。

Answer 1

使用以下方法（您可以更改字体大小/样式）：

printDet = (e) => {
        html2canvas(document.querySelector("#pdfTest")).then(canvas => {

            const imgData = canvas.toDataURL('image/png');
            const pdf = new jsPDF();

            pdf.setFontSize(20)
            pdf.setFontStyle("bold")
            pdf.addImage(imgData, 'JPEG', 0, 0, 210, 200, 'alias');

            pdf.save('download.pdf');

        });

    }

不要忘记导入：

import html2canvas from 'html2canvas';

import jsPDF from 'jspdf';