使用 jsPDF 和 html2canvas 导出 pdf

Question

I can print a PDF with jsPDF but cannot use a div as content. For this I have now imported html2canvas, unfortunately I can't really figure out from the documentation how to use this. I have found a few instructions on the internet, but they did not work properly for me. The whole thing is in WordPress. I get various error messages, either that undefiend is not a function, or that it can't find something, or whatever.

first approach:

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

second approach: Github (here someone has merged the two libraries, but that doesn't work for me either.)

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

third approach

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");
    });
}

My html looks like this:

<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

Try this below code.

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

The above code fiddle. jsfiddle

Also, refer to the below URLs.

https://github.com/devrajatverma/jsPdfExample

How to properly use jsPDF library