Merge pages from an external PDF document programmatically

In this sample, we invoke a system file picker dialog to select an external PDF file to merge. Then, we merge a first page from the selected PDF document and load the result PDF into the viewer.

window.onload = function(){ var viewer = new DsPdfViewer("#viewer", getViewerOptions()); configureViewerUI(viewer);"/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/helloworld.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Merge pages from external PDF document programmatically</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/config.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }
function getViewerOptions() { return { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: { apiUrl:, token:, webSocketUrl: false }, friendlyFileName: "sample.pdf", restoreViewStateOnLoad: false }; } function configureViewerUI(viewer) { viewer.addDefaultPanels(); viewer.toolbar.addItem({ text: "Select PDF to merge", title: "Select external PDF to merge", key: "merge-external-pdf", enabled: false, action: function() { // Invoke the system file picker dialog // to select an external PDF file to merge. // Then, merge first page from selected PDF document and // load result PDF into the viewer. var fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = ".pdf"; fileInput.onchange = function () { if (fileInput.files && fileInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function () { const fileId = "uniquefileid_" + new Date().getTime();, new Uint8Array(fileReader.result)); // Merge first page from external PDF document // to the end of the active PDF document // and load result PDF into the viewer: "sample.pdf", { pages: `0-${viewer.pageCount - 1}, [file:${fileId}]0`, reload: true } ); }; fileReader.readAsArrayBuffer(fileInput.files[0]); } }; document.body.appendChild(fileInput);; }, onUpdate: function() { return { enabled: viewer.hasDocument && viewer.canEditDocument }; } }); = viewer.toolbarLayout.viewer.default = ["open", "merge-external-pdf", "$navigation", "zoom", "pdf-organizer", "save", "about"]; }