1// ES6 Compliant Syntax
2// GitHub Copilot, Version: 1.0, Model: GPT-4, Date: 2024-06-10
3// File: showcase-demos/large-files/index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
8
9
10 const files = [
11 { fileUrl: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/us-public-health-and-welfare-code.pdf', displayName: '13,234 pages (34MB)' },
12 { fileUrl: 'https://s3.amazonaws.com/pdftron/downloads/pl/2gb-sample-file.pdf', displayName: '348 pages (2GB)' },
13 { fileUrl: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/canada-income-tax-act.pdf', displayName: '3,201 pages (20MB)' },
14];
15
16const element = document.getElementById('viewer');
17let theInstance = null;
18const onLoad = async (instance) => {
19 theInstance = instance;
20};
21
22WebViewer(
23 {
24 path: '/lib',
25 licenseKey: licenseKey,
26 initialDoc: files[0].fileUrl, // Default to the first file in the list
27 disableVirtualDisplayMode: true, // disable Virtual Display mode which does not perform well with large linearized documents
28 },
29 element
30).then((instance) => {
31 onLoad(instance);
32});
33
34const buttonLoad = document.createElement('button');
35buttonLoad.textContent = 'Load Large File';
36buttonLoad.onclick = async () => {
37 theInstance.UI.loadDocument(largeFileSelect.value);
38};
39
40// UI section
41//
42// Helper code to add controls to the viewer holding the buttons and dropdown
43// This code creates a sidebar panel to the left of the WebViewer containing the label, dropdown, and button
44
45// Create a dropdown for large files
46const largeFileSelect = document.createElement('select');
47
48// Populate the dropdown with options
49files.forEach(file => {
50 const option = document.createElement('option');
51 option.value = file.fileUrl;
52 option.textContent = file.displayName;
53 largeFileSelect.appendChild(option);
54});
55
56// set default value for the dropdown
57largeFileSelect.value = files[0].fileUrl; // Default to first file
58
59const filesLabel = document.createElement('label');
60filesLabel.textContent = 'Select File: ';
61
62// Create a container for all controls (label, dropdown, and button)
63const controlsContainer = document.createElement('div');
64
65filesLabel.className = 'files-label';
66buttonLoad.className = 'btn-load';
67largeFileSelect.className = 'file-select';
68controlsContainer.className = 'button-container';
69
70controlsContainer.appendChild(filesLabel);
71controlsContainer.appendChild(largeFileSelect);
72controlsContainer.appendChild(buttonLoad);
73
74// Create a layout wrapper so controls appear to the LEFT of the WebViewer
75const viewerLayout = document.createElement('div');
76viewerLayout.className = 'viewer-layout';
77
78// Insert the layout wrapper in place of the viewer element
79const viewerParent = element.parentNode;
80viewerParent.insertBefore(viewerLayout, element);
81
82// Place the controls sidebar first (left), then the viewer (right)
83viewerLayout.appendChild(controlsContainer);
84viewerLayout.appendChild(element);