Jspdf: Merge and/or edit pages with/of existing PDF

[g0ddest]

Is this possible to merge generated pdf pages with existing pdf file pages? It is useful for many purposes such as waterark.
This feature is implimented in many pdf libraries such as pyPDF (mergePage).

[Merg1255]

That would be nice. :)

[olsp]

+1

[carmex]

I am in need of this feature as well.

[czarly]

would definitely help around the limitation of available fonts!

[lvarayut]

+1

[craigweiser]

+1

[rubikloc]

+1

[AlexHuckert]

+1

[jirikavi]

+1

[clawish]

this would be a killer feature! +1

[hadim]

+++1111

[donatsu]

+9000
"What?! 9000!?!?!"

[prasaz]

+1

[maxvanceffer]

+1

[dennis-fedco]

My use case is ... I can create a PDF with jsPDF, but then I want to import an "existing PDF that has complex rendering on it" and then use jsPDF to add annotations and other visual elements to that "existing PDF" and then continue on adding more pages.

jsPDF is able to import existing images into the in-creation PDF but it currently does not appear to add existing PDFs into in-creation PDF. I would like to request this feature...

---

Dec, 2017 update P.S. I have been using TCPDF + FPDI

[stoianchoo]

Seems like duplicate of issue #777

[g0ddest]

@stoianchoo you can compare years (or numbers) of issues and got to know which issue is duplicate :smile:

[rogerfar]

I need this feature as well, I don't mind taking a crack at this, but @MrRio can you indicate if this is fairly easy to do (I don't have much knowledge of the PDF specs).

[dennis-fedco]

I wish you luck! I am currently using PHP 3rd party libraries called TCPDF + FPDI to accomplish this, and gave up on the JS way.

I can take an existing (incredibly complex engineering drawing) PDF file page as a template, add text/images to that template, and display the resulting page as PDF, and add more pages to it as needed, by using those libraries. This is what is demanded by my application. Looking around there were no JS way to do this. So if you make it happen.. Hoorah!

It is also funny that I generate graphs for that PDF using JS graph library on client-side first, but to be able to include them into PDF with help of the back-end PHP libraries, I encode them as BASE64 client-side, send them via POST to the server, on back-end I save them as image, then plug them into the PDF using the libraries. It is fun.

[rogerfar]

That's exactly what I do too, I generate a PDF in Base64 and post it to the server, the server will then append a few other PDF's and return the Base64 back to me, which I then just call a saveAs on.

Problem is that our app is fully offline and sometimes I can't make the round trip to the server.

[lgalke]

+1
I need to draw bounding boxes in an existing pdf. Could not find a javascript-way yet..

[Sritharan-racap]

+1

[rvalle]

+1

my use case is to add a stamp to PDFs. For example: Paid stamp on PDF invoice.

[Uzlopak]

There is no real data-layer so this would be something for version 3.0 or so.

[tejash-jl]

+1

[mariots182]

+1

[rafalkasa]

+1

[RichardLindhout]

+1

[richardfrey]

+1

[pabloxn]

+1

[alejojau]

+1

[LucasG04]

+1

[nesscx]

+1

[nathan-pichon]

+1

[avinashbitra]

+1

[bswhb]

+1

[Jarker]

+1

[ronvoluted]

+1 It's the first and last thing I need from a client-side JS PDF library :D If it could take even just one of the below it would be amazing:

1. URL
2. blob
3. base64 string

[juliansunten]

+1

[danialm]

+1

[rb0urd0n]

+1 - is this point planned?

[dennis-fedco]

I am curious are people actually putting "+1" into the comment box and then clicking "Comment"? Or is there another automated process that in place that is doing it for them? There are 15 "+1" comments in the last 6 years, where comments are identical and it is awfully consistent. Is there an Internet protocol I am not aware of? //commenting on comments that only have "+1" in them and nothing else.

[ronvoluted]

@dennis-fedco
https://github.com/MrRio/jsPDF/issues/131#issuecomment-118988291
https://github.com/MrRio/jsPDF/issues/131#issuecomment-125505892

It is to demonstrate to @MrRio that people care about this issue.

[dennis-fedco]

It's been 6 years, I can't speak for him, but I don't think he really cares :)

[MrRio]

It's also extremely difficult.

[Subtletree]

https://github.com/Hopding/pdf-lib is an alternative that can handle merging, splitting pages etc.

I'm using both libraries for different purposes.

[JamieAlizadeh]

Still no solution unfortunately

[pilotkid]

+1

[themacboy]

Im using another library to do that in combination with jsPDF. And it is working really fine.

[WolfgangVing]

@themacboy

Im using another library to do that in combination with jsPDF. And it is working really fine.

So, why not to tell us which library is, could help a lot, indeed, would help me too.

[Subtletree]

@WolfgangVing Not sure what he's using but just a few comments up, pdf-lib is pretty awesome.

[themacboy]

I'm not sure if it is correct to. Post it here, but here we go: lib-pdf and his merge option.

You can output jspdf file as array buffer and load it in pdf-lib and manipulate diferent files to merge and output as a new pdf filw

[sztepen]

I'm not sure if it is correct to. Post it here, but here we go: lib-pdf and his merge option.

You can output jspdf file as array buffer and load it in pdf-lib and manipulate diferent files to merge and output as a new pdf filw

I can confirm that this works. You saved me a lot of trouble

[hiepxanh]

for the note purpose:
merge code that can merge multi jsPDF to one PDF:

// .ts
 private async generatePdfList(type: string, page = 1) {
    console.log('STEP 1:', new Date());
    const elements = document.querySelectorAll('.staff-list-receipt');
    const elementArray = Array.from(elements);
    const bufferPromises: Promise<any>[] = elementArray
      .filter(element => !!element)
      .map(element => this.elementToPdfBuffer(type, element, page));
    const pdfArrayBuffers = await Promise.all(bufferPromises);
    console.log('STEP 2:', new Date());
    const mergedPdf = await this.mergePdfs(pdfArrayBuffers);
    const pdfUrl = URL.createObjectURL(
      new Blob([mergedPdf], { type: 'application/pdf' }),
    );
  }

  async elementToPdfBuffer(type, element, page) {
    // option 1:
    // const pdf: jsPDF = html2pdf().from(element).toPdf().get("pdf");
    // option 2:
    new jsPDF().fromHTML(element);
    const pdfBuffer = await pdf.output("arraybuffer");
    return pdfBuffer;
  }

  async mergePdfs(pdfsToMerges: ArrayBuffer[]) {
    const mergedPdf = await PDFDocument.create();
    const actions = pdfsToMerges.map(async pdfBuffer => {
      const pdf = await PDFDocument.load(pdfBuffer);
      const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
      copiedPages.forEach((page) => {
        // console.log('page', page.getWidth(), page.getHeight());
        page.setWidth(210);
        mergedPdf.addPage(page);
      });
    });
    await Promise.all(actions);
    const mergedPdfFile = await mergedPdf.save();
    return mergedPdfFile;
  }

[derek-baker]

In case anyone is wondering, the example code in hiepxanh's comment uses this library: https://github.com/Hopding/pdf-lib

[funnykanth]

hiepxanh && derek-baker you guys saved my day..

[alessandroAmedei]

+1!!

[renepardon]

Oh, it's almost a year without a +1 comment. Time for a new one? :D

+1