JsPDF Tutorial to Modify & Append Existing PDF Document in Browser Using Javascript

You are currently viewing JsPDF Tutorial to Modify & Append Existing PDF Document in Browser Using Javascript

jsPDF Tutorial to Modify & Append Existing PDF Document in Browser Using Javascript

I ended up hacking an answer from here. Not thrilled about it but it works. I created images from the content in the PDF I was trying to append and then added each as a page to my doc
 
var doc = new jsPDF('p', 'pt', 'letter');
var imgData = 'cats.jpeg';
var imgData2 = 'dogs.jpeg';
var imgData3 = 'kittens.jpeg';    
var specialElementHandlers = {
        '#content': function (element, renderer) {
            return true;
        }
    };
    var pageHeight = doc.internal.pageSize.height;
    var y = 800;
    var x = 800;
    $('#cmd').click(function () {
        doc.addImage(imgData, 'JPEG', 0, 250, 615, 200);
        doc.fromHTML($('#content').get(0), 0, 0, {
            'elementHandlers': specialElementHandlers
        });
        if (y >= pageHeight) {
            doc.addPage();
            doc.addImage(imgData3, 'JPEG', 45, 45, 500, 550);
            y = 0;
        }
        if (x >= pageHeight) {
            doc.addPage();
            doc.addImage(imgData2, 'JPEG', 50, 70, 500, 500);
            x = 0;
        }
        doc.save('TemporaryIdCard.pdf');
    });

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply