将每个 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
    });
}

Answer 2

它差点要了我的命，但最终我解决了这个问题。使用 jsPDF 库，而不是 pdfMake。

样式

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

脚本

function makePdf(){

    pages = document.querySelectorAll(".content")
    let count = 0;
    pages.forEach(page => {
        html2canvas(page, {
            onrendered: function (canvas) {
                // var data = canvas.toDataURL();
                var data = canvas.toDataURL('image/png');
                var imgWidth = pdf.internal.pageSize.getWidth();
                pdf.addImage(data, 'PNG', '', '', imgWidth, 0);
                pdf.addPage(page)
                count++;
                if (count === pages.length) {
                    pdf.save("document.pdf")                        
                }
            }
        });
    }) //loop       
} //fn.

P.S：关于 pdf 页面大小，如果您希望获得良好的分辨率，则应避免使用 internal.pageSize.getHeight();。给它 0

将每个 html 类导出到 pdf 文件

Exporting each html classes to pdf file

javascript

jspdf

已更新

将每个 html 类 导出到 pdf 文件

Exporting each html classes to pdf file

javascript

jspdf

已更新

将每个 html 类导出到 pdf 文件