javascript - 将每个 html 类导出到 pdf 文件

Question

我正在尝试将 html .class 导出到合并的 pdf 页面。使用此库:pdfMake

body里面有两个.content，我给了a4样式..

.content {
    padding: 50px 0;
    width: 1000px;
    height: 842px;
}

并尝试将这些元素导出为 PDF。

已更新

function makePdf(){
    pages = document.querySelectorAll(".content")
    html2canvas(pages, {
        onrendered: function (canvas) {
            var data = canvas.toDataURL();
            var docDefinition = {
                content: [{
                    image: data,
                    width: 500
                }]
            };


            pdfMake.createPdf(docDefinition).download("document.pdf");
        }
    });
}

但是问题就在这里。我无法将 .content 导出为合并的 pdf 页面。当我像这样使用它时: html2canvas(pages, { 它导出 2 个合并的页面，但为空。

我尝试这样检查。 html2canvas(pages[0], {) 那么它可以毫无问题地导出一个 pdf 文件。但是第二个 .content 不会出现(当然...)

所以我将其放入 forEach 循环中，如下所示。

function makePdf(){
    pages = document.querySelectorAll(".content")
    pages.forEach(page => {
        html2canvas(page, {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500
                    }]
                };


                pdfMake.createPdf(docDefinition).download("table.pdf");
            }
        });
    })

}

但随后它会一张一张地导出 .content pdf。它没有合并...

我有点困惑。如何从 .content

实现合并 pdf 页面

Answer 1

async function makePdf(){
    const pdf = new jsPDF("a4");
    let documents = document.querySelectorAll(".content")
    html2canvas(documents).then(canvas => {
      var imgWidth = pdf.internal.pageSize.getWidth();
      var imgHeight = pdf.internal.pageSize.getHeight();
      const contentDataURL = canvas.toDataURL('image/png');
      pdf.addImage(contentDataURL, 'PNG', 0, 0, imgWidth, imgHeight, '', 'FAST');
      pdf.save("test.pdf"); // Generated PDF
    });
}