Load documents dynamically in TypeScript PDF Viewer

14 Oct 20251 minute to read

Load or switch PDF documents dynamically after the initial load. Use the load method to load a PDF by Base64 string or file name.

The following steps show how to load a PDF dynamically.

Step 1: Follow the steps in the Get started with JavaScript ES6 PDF Viewer guide to create a sample.

Step 2: Use the following code to load a PDF using a Base64 string.

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

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

Step 3: Use the following code to load a PDF by document name.

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

// Load PDF document using a 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