将每个html类导出为pdf文件

Question

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

内部有两个.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