Inserting a page into a PDF using JavaScript

Requirements

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

Package: Page ManipulationLive demo

Pages can be inserted into the current PDF document using the insertBlankPages and insertPages functions. Inserting blank pages is fairly straight forward.

Insert blank pages

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const docViewer = instance.Core.documentViewer;

    docViewer.addEventListener('documentLoaded', async () => {
      const doc = docViewer.getDocument();

      const width = 612;
      const height = 792;
      docViewer.getPageCount(); // 3

      // Insert blank pages
      await doc.insertBlankPages([2, 3], width, height);
      // The document now contains [page1, newBlankPage1, page2, newBlankPage2, page3]
      docViewer.getPageCount(); // 5
    });
  });

WebViewerInstance DocumentViewer.getDocument DocumentViewer.getPageCount Document.insertBlankPages

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const docViewer = instance.docViewer;

    docViewer.on('documentLoaded', async () => {
      const doc = docViewer.getDocument();

      const width = 612;
      const height = 792;
      docViewer.getPageCount(); // 3

      // Insert blank pages
      await doc.insertBlankPages([2, 3], width, height);
      // The document now contains [page1, newBlankPage1, page2, newBlankPage2, page3]
      docViewer.getPageCount(); // 5
    });
  });

WebViewerInstance DocumentViewer.getDocument DocumentViewer.getPageCount Document.insertBlankPages

Insert a page from another document or the same document

More likely someone will want to insert pages from one PDF into another. To achieve this, instantiate a new Document object by passing the URL of the second PDF to createDocument function as a first parameter.

Currently there aren't any functions to duplicate pages in the current document directly. If you want to copy a page, you'll need to instantiate a new Document object and load the same PDF into it using createDocument and insert the page into the current document.

JavaScript (SDK v8.0+)

WebViewer({
  // options
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer } = instance.Core;

    documentViewer.addEventListener('documentLoaded', async () => {
      const doc = documentViewer.getDocument();
      const pagesToInsert = [4, 5, 6];
      const pageIndexToInsert = doc.getPageCount() + 1;
      // in this example doc.getPageCount() returns 3


      // use createDocument to create CoreControls.Document instance
      const docToInsert = await instance.Core.CoreControls.createDocument('http://localhost/pdf/another.pdf', {});

      doc.insertPages(docToInsert, pagesToInsert, pageIndexToInsert).then(() => {
        // page 4, 5, and 6 from 'another.pdf' has been inserted into to the current pdf
        doc.getPageCount(); // 6
      });

    });
  });

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

JavaScript (SDK v6.0+)

WebViewer({
  // options
}, document.getElementById('viewer'))
  .then(instance => {
    const { docViewer, CoreControls } = instance;

    docViewer.on('documentLoaded', async () => {
      const doc = docViewer.getDocument();
      const pagesToInsert = [4, 5, 6];
      const pageIndexToInsert = doc.getPageCount() + 1;
      // in this example doc.getPageCount() returns 3


      // use createDocument to create CoreControls.Document instance
      const docToInsert = await CoreControls.createDocument('http://localhost/pdf/another.pdf', {});

      doc.insertPages(docToInsert, pagesToInsert, pageIndexToInsert).then(() => {
        // page 4, 5, and 6 from 'another.pdf' has been inserted into to the current pdf
        doc.getPageCount(); // 6
      });

    });
  });

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