1const viewers = [
2 {
3 initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
4 domElement: 'leftPanel',
5 },
6 {
7 initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
8 domElement: 'rightPanel',
9 },
10];
11let workerTransportPromise;
12
13Core.setWorkerPath('../../../lib/core');
14Core.getDefaultBackendType().then(pdfType => {
15 workerTransportPromise = Core.initPDFWorkerTransports(pdfType, {});
16
17 initializeWebViewer(viewers[0]);
18 initializeWebViewer(viewers[1]);
19});
20// eslint-disable-next-line no-undef
21const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;
22
23const initializeWebViewer = viewer => {
24 WebViewerConstructor(
25 {
26 path: '../../../lib',
27 // since there are two instance of WebViewer, use "workerTransportPromise" so viewers can share resources
28 workerTransportPromise: {
29 pdf: workerTransportPromise,
30 },
31
32 // set "useDownloader" to false to the either file is loaded
33 useDownloader: false,
34
35 // can load a office documents as PDFDocument by setting "loadAsPDF"
36 loadAsPDF: true,
37
38 initialDoc: viewer.initialDoc,
39 },
40 document.getElementById(`${viewer.domElement}`)
41 ).then(instance => {
42 const { documentViewer } = instance.Core;
43 const { enableFeatures, enableElements, openElements, ThumbnailsPanel, loadDocument } = instance.UI;
44 enableFeatures(['ThumbnailMultiselect', 'MultipleViewerMerging']);
45 enableElements(['documentControl']);
46
47 documentViewer.addEventListener('documentLoaded', () => {
48 openElements(['thumbnailsPanel']);
49
50 // select some pages
51 ThumbnailsPanel.selectPages([1]);
52 });
53
54 document.getElementById(`${viewer.domElement}`).addEventListener('documentMerged', data => {
55 // can use "documentMerged" event to track what is being merged into a document
56 console.log(`From: ${data.detail.filename} pages: ${data.detail.pages}`);
57 });
58
59 // set up controls on the left side bar
60 document.getElementById(`${viewer.domElement}-select`).onchange = e => {
61 loadDocument(e.target.value);
62 };
63
64 document.getElementById(`${viewer.domElement}-file-picker`).onchange = e => {
65 const file = e.target.files[0];
66
67 if (file) {
68 loadDocument(file);
69 }
70 };
71
72 document.getElementById(`${viewer.domElement}-url-form`).onsubmit = e => {
73 e.preventDefault();
74 loadDocument(document.getElementById(`${viewer.domElement}-url`).value);
75 };
76 });
77};