Append Existing Pdf to Jspdf

Question

I am using the jspdf library to create a pdf and its working out great. I am now trying to append to that pdf another existing pdf. At the moment when my user clicks the download button it fires off two separate downloads. I was thinking that a work around might be creating two images and adding them to my pdf created with Jspdf. Has anyone appended an existing pdf to a pdf generated using jspdf?

$(document).ready(function () {
    var doc = new jsPDF('p', 'pt', 'letter');
    var imgData = 'cats.jpg'
  var specialElementHandlers = {
        '#content': function (element, renderer) {
            return true;
        }
    };
    $('#cmd').click(function () {
        doc.addImage(imgData, 'JPEG', 0, 250, 615, 200);
        doc.fromHTML($('#content').get(0), 0, 0, {

            'elementHandlers': specialElementHandlers
        });

        doc.save('TemporaryIdCard.pdf');
    });


});

score 1 · Accepted Answer · edited Mar 23 '20 at 15:09

1

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

edited Mar 23 '20 at 15:09

Marcello B.

4,177
11
45
65

answered Oct 23 '17 at 15:29

Leonardo Wildt

2,529
5
27
56

5

But this is not a solution from your question! It has nothing to do with appending existing PDF to JsPDF. If you want do it see **[my answer](https://stackoverflow.com/a/51994639)**. – Bharata Aug 23 '18 at 22:59
3

@Bharata Dafuq? – Leonardo Wildt Aug 24 '18 at 13:45
Just a question, I have the same problem and was wondering if you manually created images from the given pdf-files and then added them to the generated jsPDF? – K.Oleksiak Jan 30 '20 at 07:35
@K.Oleksiak no the approach that i did was to create a page per image. I was working with images originally so that helped. I would look at Bharata s answer for more guidance into adding extra pdf page – Leonardo Wildt Jan 31 '20 at 00:13
Could I combine different orientation pdfs together? thanks. – Jack Hu May 08 '20 at 09:42
**UPDATE FOR MY COMMENT ABOVE:** I have updated my answer there and added two examples how to create embed PDF but with another JS library. – Bharata Jul 21 '20 at 21:09

Append Existing Pdf to Jspdf

1 Answers1

Linked