Load documents dynamically in JavaScript PDF Viewer

13 Feb 20261 minute to read

The PDF Viewer supports loading or switching PDF documents at runtime after the initial viewer initialization. Use the load method to open a document from a URL or a Base64 string.

The following steps show common approaches for loading documents dynamically.

Step 1: Follow the getting started guide to create a basic JavaScript PDF Viewer sample: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript/getting-started

Step 2: Use the following code snippet to load the document from a Base64 string.

<button id='load1'>LoadDocumentFromBase64</button>

// Load PDF document from Base64 string
document.getElementById('load1').addEventListener('click', () => {
  viewer.load(
    'data:application/pdf;base64,'+ AddBase64String, null);
}

Step 3: Use the following code snippet to load a PDF document from a URL (document name)

<button id='load2'>LoadDocument</button>

// Load PDF document using file name
document.getElementById('load2').addEventListener('click', () => {
  viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
});

Find the sample: Load PDF documents dynamically