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
7
8 const files = [
9 { fileUrl: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/us-public-health-and-welfare-code.pdf', displayName: '13,234 pages (30MB)' },
10 { fileUrl: 'https://s3.amazonaws.com/pdftron/downloads/pl/2gb-sample-file-v2.pdf', displayName: '348 pages (2GB)' },
11 { fileUrl: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/canada-income-tax-act.pdf', displayName: '3,201 pages (18MB)' },
12];
13
14const element = document.getElementById('viewer');
15let theInstance = null;
16const onLoad = async (instance) => {
17 theInstance = instance;
18};
19
20WebViewer(
21 {
22 path: '/lib',
23 licenseKey: 'YOUR_LICENSE_KEY',
24 initialDoc: files[0].fileUrl, // Default to the first file in the list
25 disableVirtualDisplayMode: true, // disable Virtual Display mode which does not perform well with large linearized documents
26 },
27 element
28).then((instance) => {
29 onLoad(instance);
30});
31
32const buttonLoad = document.createElement('button');
33buttonLoad.textContent = 'Load Large File';
34buttonLoad.onclick = async () => {
35 theInstance.UI.loadDocument(largeFileSelect.value);
36};
37
38// UI section
39//
40// Helper code to add controls to the viewer holding the buttons and dropdown
41// This code creates a container for the buttons and dropdown, styles them, and adds them to the viewer
42
43// Create a dropdown for large files
44const largeFileSelect = document.createElement('select');
45
46// Populate the dropdown with options
47files.forEach(file => {
48 const option = document.createElement('option');
49 option.value = file.fileUrl;
50 option.textContent = file.displayName;
51 largeFileSelect.appendChild(option);
52});
53
54// set default value for the dropdown
55largeFileSelect.value = files[0].fileUrl; // Default to first file
56
57const filesLabel = document.createElement('label');
58filesLabel.textContent = 'Select File: ';
59
60// Create a container for all controls (label, dropdown, and buttons)
61const controlsContainer = document.createElement('div');
62
63filesLabel.className = 'files-label';
64buttonLoad.className = 'btn-load';
65largeFileSelect.className = 'file-select';
66controlsContainer.className = 'button-container';
67
68controlsContainer.appendChild(filesLabel);
69controlsContainer.appendChild(largeFileSelect);
70controlsContainer.appendChild(buttonLoad);
71element.insertBefore(controlsContainer, element.firstChild);