Large Files Showcase Demo Code Sample

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Web SDKLive demo

Effortlessly display large PDF files (1GB+) in your app reliably and quickly. Bypass server limitations and prevent browser crashes for a smooth viewing experience.

This demo allows you to:

• Test on large PDF files
• Annotate the PDF
• Download the PDF file

Implementation steps

To add large file PDF handling capability with WebViewer: Step 1: Follow get started in your preferred web stack for WebViewer Step 2: Add the ES6 JavaScript sample code provided in this guide

Once you generate your license key, it will automatically be included in your sample code below.

// ES6 Compliant Syntax
// GitHub Copilot, Version: 1.0, Model: GPT-4, Date: 2024-06-10
// File: showcase-demos/large-files/index.js

import WebViewer from '@pdftron/webviewer';

const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';


 const files = [
  { fileUrl: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/us-public-health-and-welfare-code.pdf', displayName: '13,234 pages (34MB)' },
  { fileUrl: 'https://s3.amazonaws.com/pdftron/downloads/pl/2gb-sample-file.pdf', displayName: '348 pages (2GB)' },
  { fileUrl: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/canada-income-tax-act.pdf', displayName: '3,201 pages (20MB)' },
];

const element = document.getElementById('viewer');
let theInstance = null;
const onLoad = async (instance) => {
  theInstance = instance;
};

WebViewer(
  {
    path: '/lib',
    licenseKey: licenseKey, 
    initialDoc: files[0].fileUrl, // Default to the first file in the list
    disableVirtualDisplayMode: true, // disable Virtual Display mode which does not perform well with large linearized documents
  },
  element
).then((instance) => {
  onLoad(instance);
});

const buttonLoad = document.createElement('button');
buttonLoad.textContent = 'Load Large File';
buttonLoad.onclick = async () => {
  theInstance.UI.loadDocument(largeFileSelect.value);
};

// UI section
//
// Helper code to add controls to the viewer holding the buttons and dropdown
// This code creates a sidebar panel to the left of the WebViewer containing the label, dropdown, and button

// Create a dropdown for large files
const largeFileSelect = document.createElement('select');

// Populate the dropdown with options
files.forEach(file => {
  const option = document.createElement('option');
  option.value = file.fileUrl;
  option.textContent = file.displayName;
  largeFileSelect.appendChild(option);
});

// set default value for the dropdown
largeFileSelect.value = files[0].fileUrl; // Default to first file

const filesLabel = document.createElement('label');
filesLabel.textContent = 'Select File: ';

// Create a container for all controls (label, dropdown, and button)
const controlsContainer = document.createElement('div');

filesLabel.className = 'files-label';
buttonLoad.className = 'btn-load';
largeFileSelect.className = 'file-select';
controlsContainer.className = 'button-container';

controlsContainer.appendChild(filesLabel);
controlsContainer.appendChild(largeFileSelect);
controlsContainer.appendChild(buttonLoad);

// Create a layout wrapper so controls appear to the LEFT of the WebViewer
const viewerLayout = document.createElement('div');
viewerLayout.className = 'viewer-layout';

// Insert the layout wrapper in place of the viewer element
const viewerParent = element.parentNode;
viewerParent.insertBefore(viewerLayout, element);

// Place the controls sidebar first (left), then the viewer (right)
viewerLayout.appendChild(controlsContainer);
viewerLayout.appendChild(element);

View the full sample on GitHub