Merge PDF Pages Using the JavaScript Library

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Package: Page ManipulationLive demo

Two or more PDF files can be merged together by using the insertPage function on the Document instance. See the following example:

JavaScript (SDK v8.0+)

WebViewer({
  ... // other options
  // when inserting pages from another document, the 'useDownloader' option should be false
  url: '/url/to/first.pdf',
  useDownloader: false,
}, document.getElementById('viewer'))
  .then(async instance => {
    const { documentViewer } = instance.Core;
    const doc = documentViewer.getDocument();

    const secondDoc = await instance.Core.createDocument('url/to/second.pdf');
    const pagesToInsert = [4, 5, 6];
    const pageIndexToInsert = doc.getPageCount() + 1;
    // in this example doc.getPageCount() returns 3

    doc.insertPages(secondDoc, pagesToInsert, pageIndexToInsert).then(() => {
      doc.getPageCount(); // 6
    });
  });

WebViewerInstance DocumentViewer.getDocument Core.createDocument Document.insertPages Document.getPageCount

JavaScript (SDK v6.0+)

WebViewer({
  ... // other options
  // when inserting pages from another document, the 'useDownloader' option should be false
  url: '/url/to/first.pdf',
  useDownloader: false,
}, document.getElementById('viewer'))
  .then(async instance => {
    const { docViewer, CoreControls } = instance;
    const doc = docViewer.getDocument();

    const secondDoc = await CoreControls.createDocument('url/to/second.pdf');
    const pagesToInsert = [4, 5, 6];
    const pageIndexToInsert = doc.getPageCount() + 1;
    // in this example doc.getPageCount() returns 3

    doc.insertPages(secondDoc, pagesToInsert, pageIndexToInsert).then(() => {
      doc.getPageCount(); // 6
    });
  });

WebViewerInstance DocumentViewer.getDocument CoreControls.createDocument Document.insertPages Document.getPageCount

Merge files without WebViewer

When using Core without WebViewer, certain flags need to set to make Core function correctly and to be able to load web workers from the correct path. You need to set setPDFWorkerPath, forceBackendType and disableEmbeddedJavaScript as shown:

JavaScript (SDK v8.0+)

Core.forceBackendType('ems');
Core.setPDFWorkerPath('/lib/core/pdf'); // path to web workers
Core.disableEmbeddedJavaScript(); // disabling pdf javascript

// array of url of PDFs to merge
const urls = [
  'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  'https://pdftron.s3.amazonaws.com/downloads/pl/Cheetahs.pdf',
  'https://pdftron.s3.amazonaws.com/downloads/pl/magazine-short.pdf',
];

mergeDocuments(urls).then(mergedPdf => {
  // merged pdf, here you can download it using mergedPdf.getFileData
  
});


// recursive function with promise 
function mergeDocuments(urlArray, nextCount = 1, doc = null) {
  return new Promise(async function(resolve, reject) {
    if (!doc) {
      doc = await Core.createDocument(urlArray[0]);
    }
    const newDoc = await Core.createDocument(urlArray[nextCount]);
    const newDocPageCount = newDoc.getPageCount();

    // create an array containing 1…N
    const pages = Array.from({ length: newDocPageCount }, (v, k) => k + 1);
    const pageIndexToInsert = doc.getPageCount() + 1;
    // in this example doc.getPageCount() returns 3

    doc.insertPages(newDoc, pages, pageIndexToInsert)
      .then(result => resolve({
        next: urlArray.length - 1 > nextCount,
        doc: doc,
      })
    );
    // end Promise
  }).then(res => {
    return res.next ?
      mergeDocuments(urlArray, nextCount + 1, res.doc) :
      res.doc;
  });
}

Core.createDocument Document.insertPages Document.getPageCount

JavaScript (SDK v6.0+)

CoreControls.forceBackendType('ems');
CoreControls.setPDFWorkerPath('/lib/core/pdf'); // path to web workers
CoreControls.disableEmbeddedJavaScript(); // disabling pdf javascript

// array of url of PDFs to merge
const urls = [
  'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  'https://pdftron.s3.amazonaws.com/downloads/pl/Cheetahs.pdf',
  'https://pdftron.s3.amazonaws.com/downloads/pl/magazine-short.pdf',
];

mergeDocuments(urls).then(mergedPdf => {
  // merged pdf, here you can download it using mergedPdf.getFileData
  
});


// recursive function with promise 
function mergeDocuments(urlArray, nextCount = 1, doc = null) {
  return new Promise(async function(resolve, reject) {
    if (!doc) {
      doc = await CoreControls.createDocument(urlArray[0]);
    }
    const newDoc = await CoreControls.createDocument(urlArray[nextCount]);
    const newDocPageCount = newDoc.getPageCount();

    // create an array containing 1…N
    const pages = Array.from({ length: newDocPageCount }, (v, k) => k + 1);
    const pageIndexToInsert = doc.getPageCount() + 1;
    // in this example doc.getPageCount() returns 3

    doc.insertPages(newDoc, pages, pageIndexToInsert)
      .then(result => resolve({
        next: urlArray.length - 1 > nextCount,
        doc: doc,
      })
    );
    // end Promise
  }).then(res => {
    return res.next ?
      mergeDocuments(urlArray, nextCount + 1, res.doc) :
      res.doc;
  });
}

CoreControls.createDocument Document.insertPages Document.getPageCount