1

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

anonymoushuman
  • 53
  • 1
  • 8

1 Answers1

0

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

Bhautik
  • 11,125
  • 3
  • 16
  • 38
  • Thanks, it works, if I use Firefox or Chrome then it opens in my browser which works but if I use Safari or open the PDF via Explorer/Finder it shows me a black box as content, do I need to do a special CSS for that? When I open it in the preview app it shows me my logo correctly and my Organger text too, it just doesn't show the black text and in Adobe Acrobat Reader it gives me an error message when I open it. – anonymoushuman Mar 10 '21 at 12:23
  • Made it. For all who read this post in the future with this post I made it. [custom background post](https://stackoverflow.com/questions/23891483/change-transparent-color-into-white-in-html2canvas/23928038#23928038) – anonymoushuman Mar 10 '21 at 17:02
  • @anonymoushuman you can see I added background: #ffffff in my answer. – Bhautik Mar 10 '21 at 17:04
  • That didn't work for me, but when I added it to the CSS file, it worked. – anonymoushuman Mar 10 '21 at 17:06