使用 jsPDF 和 html2canvas 导出 pdf

Question

我可以使用 jsPDF 打印 PDF，但不能使用 div 作为内容。为此，我现在导入了 html2canvas，不幸的是，我无法从文档中真正弄清楚如何使用它。我在互联网上找到了一些说明，但它们对我来说并不适用。整个事情都在 WordPress 中。我收到各种错误消息，要么是 undefiend 不是一个函数，要么是它找不到某些东西，或者其他什么。

第一种方法：

function testPDF() {
    console.log("testPDF-function works")
    html2canvas(document.getElementById('a4')).then(function(canvas){
        document.body.appendChild(canvas)
    })
    var img = canvas.toDataURL('img/png')

    var doc = new jsPDF();
    doc.addImage(img, 'JPEG', 20,20)
    doc.save('test.pdf');
}

第二种方法：Github（这里有人合并了两个库，但这对我也不起作用。）

let page = document.getElementById("a4");
function testPDF() {
    html2PDF(page, {
        jsPDF: {
            format: "a4",
        },
        imageType: "image/jpeg",
        output: "offerte.pdf",
    });
}

第三种方法

function testPDF() {
    html2canvas(document.getElementById("a4")).then(function cancas(canvas) {
        // document.body.appendChild(canvas);
        var doc = new jsPDF();
        doc.addImage(document.body.appendChild(canvas));
        doc.save("offerte.pdf");
    });
}

我的 html 看起来像这样：

<div id='a4' style='height: 297mm; width: 210mm; border: 1px black solid; margin-left:20%;'>
    <p>Content</p>
</div>
<button id='pdfExport' onclick='testPDF' >Export PDF</button>"

html2canvas

jsPDF

Answer 1

试试下面的代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<style type="text/css">
    #a4{width: 100%;background: #ffffff;color: #000000;}
</style>

<div id="a4" style="height: 297mm; width: 210mm; border: 1px black solid; margin-left:20%;">
   Content
</div>
<button id="pdfExport" onclick="javascript:demoFromHTML();">Export PDF</button>

<script>
    function demoFromHTML() {
        html2canvas(document.getElementById('a4'), {
            onrendered: function (canvasObj) {
                var pdf = new jsPDF('P', 'pt', 'a4'),
                    pdfConf = {
                        pagesplit: false,
                        backgroundColor: '#FFF'
                    };
                document.body.appendChild(canvasObj); //appendChild is required for html to add page in pdf
                pdf.addHTML(canvasObj, 0, 0, pdfConf, function () {
                    document.body.removeChild(canvasObj);
                    //pdf.addPage();
                    pdf.save('Test.pdf');
                });
            }
        });
    }
</script>

以上代码fiddle。 jsfiddle

另请参考以下网址。

https://github.com/devrajatverma/jsPdfExample

How to properly use jsPDF library

使用 jsPDF 和 html2canvas 导出 pdf

Export pdf with jsPDF and html2canvas

javascript

wordpress

html2canvas

jspdf