Syncfusion AI Assistant

How can I help you?

Load PDF Viewer with Local Resources in TypeScript

24 Apr 20262 minutes to read

This guide shows how to configure the Syncfusion TypeScript (JavaScript/ES6) PDF Viewer to load PDF documents and required PDFium resources from your local application instead of using a CDN.

Prerequisites

Follow the getting started guide to create a basic TypeScript PDF Viewer (Standalone) application.

Note: Local resource loading is supported only in standalone mode. Do not use this approach with server-backed PDF Viewer.

Configuration Steps

Step 1: Copy the Resource Files

Copy the ej2-pdfviewer-lib folder to your application output directory (commonly dist/) using the following commands:

xcopy /E /I node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib public\assets\ej2-pdfviewer-lib
cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib public/assets/ej2-pdfviewer-lib

Step 2: Add Your PDF Document

Place your PDF file inside the same output directory.

Your folder structure:

dist/
 ├── ej2-pdfviewer-lib/
 │   ├── pdfium.js
 │   └── pdfium.wasm
 └── pdfsuccinctly.pdf

Step 3: Update the PDF Viewer Code

Configure the PDF Viewer to use local paths.

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

  PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);

const pdfviewer: PdfViewer = new PdfViewer({
  // Path to your locally hosted PDF document
  documentPath: window.location.origin + '/pdfsuccinctly.pdf',

  // Path to the locally hosted PDFium resource files
  resourceUrl: window.location.origin + '/ej2-pdfviewer-lib'
});

pdfviewer.appendTo('#PdfViewer');

Ensure your index.html contains a container element:

<div id="PdfViewer" style="height: 640px"></div>

Step 4: Run the Application

Build and run your application:

npm start

The PDF Viewer will now load the document and resources from local files.

View sample on GitHub