如何在基于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

由于是网页，请尝试使用jsPDF html()。这是示例代码。

html()

Answer 2

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->

<script>
    function download() {
        let pdf = new jsPDF('l', 'pt', 'a4');
        pdf.html(document.getElementById('pdfTest'), {
            callback: function (pdf) {
                // pdf.save('download.pdf');
                window.open(doc.output('bloburl'));
            }
        });
    }
</script>

不要忘记导入：

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';