> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/samples/showcase-demo-large-files.md).

# Large Files Showcase Demo Code Sample

Display large PDF files in a browser or mobile app quickly and reliably.

{% hint style="info" %}
**Requirements**

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

<a href="/web/get-started/readme.md" class="button primary">Web SDK</a><a href="https://showcase.apryse.com/large-files" class="button primary">Live demo</a>
{% endhint %}

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](/web/get-started/readme.md) 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.

{% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="compact" %}

<pre class="language-js" data-line-numbers><code class="lang-js">// 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 = '<code class="expression">visitor.claims.wvKey || "YOUR_WEBVIEWER_LICENSE_KEY"</code>';


 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);
</code></pre>

[View the full sample on GitHub](https://github.com/ApryseSDK/webviewer-samples/tree/main/showcase-demos-playground)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/get-started/samples/showcase-demo-large-files.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.