Inserting a page into a PDF using JavaScript

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

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

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.

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

    });
  });