how can we do pdf merging using javascript

Question

I wanted to do client side scrpting for merging and splitting pdf, so i wanted to use itextsharp. Can that be used with javascript. I am new to Javascript. Please help me with your valuable suggestions.

Answer 1

I found an entirely client-side solution using the PDF-LIB library: https://pdf-lib.js.org/

It uses the function mergeAllPDFs which takes one parameter: urls, which is an array of urls to the files.

Make sure to include the following in the header:

<script src='https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.js'></script>
<script src='https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.min.js'></script>

Then:

async function mergeAllPDFs(urls) {
    
    const pdfDoc = await PDFLib.PDFDocument.create();
    const numDocs = urls.length;
    
    for(var i = 0; i < numDocs; i++) {
        const donorPdfBytes = await fetch(urls[i]).then(res => res.arrayBuffer());
        const donorPdfDoc = await PDFLib.PDFDocument.load(donorPdfBytes);
        const docLength = donorPdfDoc.getPageCount();
        for(var k = 0; k < docLength; k++) {
            const [donorPage] = await pdfDoc.copyPages(donorPdfDoc, [k]);
            //console.log("Doc " + i+ ", page " + k);
            pdfDoc.addPage(donorPage);
        }
    }

    const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
    //console.log(pdfDataUri);
  
    // strip off the first part to the first comma "data:image/png;base64,iVBORw0K..."
    var data_pdf = pdfDataUri.substring(pdfDataUri.indexOf(',')+1);
}

Answer 2

There are several client-side JavaScript libraries supporting merging and splitting existing PDFs that I'm aware of which might be useful to you:

• PDF Assembler supports this and has a live demo. The Prior Art / Alternatives part of its README is worth checking out, where several other JavaScript PDF libraries (not necessarily client-side) are mentioned and commented on.
• pdf-lib is a newer library under active development. Similarly, the Prior Art part is worth checking out.

Answer 3

If you just want to display multiple PDFs as merged into a single document in the browser, this is surely possible with pdf.js - see my answer here.

Surely that example could also be used to show a specific subset of pages, thus giving the user the ability to split it.

However, if you need the result to be available for download, there's no way (afaik) around server-side processing - at least if you want to stay in the open source, free of charge realm.

---

Update: Using a combination of pdf.js (Mozilla) to render the pdf - which happens on the canvas by default - and jsPdf (parall.ax) one should be able to get the merged result (or even anything else that was drawn on your canvas/es) for download, printing, etc. by using the canvas' toDataUrl() approach found this answer to export page by page (using jsPdf's addPage function)

Answer 4

If you want to do a merge operation then you can use easy-pdf-merge below is the link :

https://www.npmjs.com/package/easy-pdf-merge

Here is an example:

var merge = require('easy-pdf-merge');
merge(['File One.pdf','File Two.pdf'],'File Ouput.pdf',function(err){


    if(err)
    return console.log(err);

    console.log('Successfully merged!');
});

Hope this helps.

Answer 5

No, you can't use iTextSharp (a .Net port of iText, which was written in Java) with JavaScript in a browser.

You could use iText in a Java applet, or there are a couple of PDF libraries for JavaScript if you search (mostly experimental ones, I understand, such as this one Mozilla did, or this one).

Answer 6

You can use pure JS with pdfjs-dist:

function pdfMerge(urls, divRootId) {
    //necessário pois para manter as promisses sincronizadas com await
    (async function loop() {
        for (url_item of urls) {
            console.log("loading: " + url_item);
            var loadingTask = pdfjsLib.getDocument(url_item);
            //sem isso fica dessincronizado
            await loadingTask.promise.then(function (pdf) {
                pdf.getMetadata().then(function (metaData) {
                    console.log("pdf (" + urls + ") version: " + metaData.info.PDFFormatVersion); //versão do pdf
                }).catch(function (err) {
                    console.log('Error getting meta data');
                    console.log(err);
                });
                console.log("páginas: " + pdf.numPages);
                let i = 0;
                while (i < pdf.numPages) {
                    var pageNumber = i;
                    pdf.getPage(pageNumber).then(function (page) {
                        var div = document.createElement("div");
                        var documentosDiv = document.querySelector('#' + divRootId);
                        documentosDiv.appendChild(div);
                        var canvas = document.createElement("canvas");
                        div.appendChild(canvas);
                        // Prepare canvas using PDF page dimensions
                        var viewport = page.getViewport({scale: 1, });
                        //var canvas = document.getElementById('the-canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        // Render PDF page into canvas context
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        var renderTask = page.render(renderContext);
                        renderTask.promise.then(function () {
                            console.log('Page rendered');
                        });
                    });
                    i++;
                }
                // Fetch the first page
            }, function (reason) {
                // PDF loading error
                console.error(reason);
            });
        }
    })();
}

html example:

<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>

<h1>Merge example</h1>

<div id="documentos-container"></div>

<style>
    canvas {
        border:1px solid black;
    }
</style>

Answer 7

Here https://codepen.io/hudson-moreira/pen/MWmpqPb you have a working example of adding multiple pdfs and combining them into one, all directly from the front-end using the Hopding/pdf-lib library. The layout needs some adjustment but in this example it is possible to dynamically add and remove files directly from the screen.

In short, this function combines the PDFs, but it is necessary to read them in Uint8Array format before applying this function.

  async function joinPdf() {
  const mergedPdf = await PDFDocument.create();
  for (let document of window.arrayOfPdf) {
      document = await PDFDocument.load(document.bytes);
      const copiedPages = await mergedPdf.copyPages(document, document.getPageIndices());
      copiedPages.forEach((page) => mergedPdf.addPage(page));
  }
  var pdfBytes = await mergedPdf.save();
  download(pdfBytes, "pdfconbined" + new Date().getTime() + ".pdf", "application/pdf");
  }
  

Answer 8

This is a library for javascript to generate PDFs. It works on the client:

http://parall.ax/products/jspdf#

Another solution would be to make an ajax call, generate the PDF on the server with whatever technology you want to use (itextsharp) and return the generated PDF to the client.

Answer 9

I achieved this using pdfjs on browser (i.e. compiled it to browser environment using parcel)

https://github.com/Munawwar/merge-pdfs-on-browser (folder pdfjs-approach)