Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Integrating Svelte with PDF.js Express

Welcome to PDF.js Express. This guide will help you integrate a free trial of PDF.js Express WebViewer into Svelte applications on the browser. It will help you clone the Svelte sample repository, walk through the project structure, and show you how to call other WebViewer API. Your free trial includes unlimited trial usage and support from solution engineers.

Get the Svelte sample source code here

Prerequisites

Node.js is not required for PDF.js Express
PDF.js Express does not require Node, npm, or node_modules. It is only recommended to run the samples.
No trial license key required.
The trial of PDF.js Express SDK works without a license key. A commercial license key is required for use in a production environment. Please purchase a license key if you do not have one.

Initial setup

  1. Clone the Svelte sample by executing

    git clone https://github.com/pdfjs-express/pdfjs-express-svelte-sample.git
    
  2. Once cloned, navigate into the pdfjs-express-svelte-sample folder and install all the required dependencies by executing

    npm install
    

npm will also download the PDF.js Express WebViewer and extract it to /public/lib.

You are now ready to run the sample or use more WebViewer APIs.

Sample overview

After initial setup, your pdfjs-express-svelte-sample directory should be laid out like this:

pdfjs-express-svelte-sample
├── LICENSE
├── node_modules
│   └── ...
├── package.json
├── package-lock.json
├── public
│   ├── bundle.css
│   ├── bundle.css.map
│   ├── bundle.js
│   ├── bundle.js.map
│   ├── favicon.png
│   ├── global.css
│   ├── index.html
│   └── lib
├── README.md
├── rollup.config.js
└── src
    ├── App.svelte
    ├── main.js
    └── WebViewer.svelte

Notable files and directories include:

File/Folder Name Description
LICENSE Lists the PDF.js Express copyright and license information.
App.svelte Contains the main application code which instantiates a WebViewer and loads a document
main.js Adds the application defined in App.svelte to the body element of /public/index.html
WebViewer.svelte Contains the definition for the WebViewer component
bundle.js JavaScript bundle that is compiled by Svelte
lib Contains the extracted PDF.js Express SDK

Run the sample

To run the sample, navigate to your /pdfjs-express-svelte-sample directory and execute

npm run dev

Then navigate to http://localhost:5000. You should see WebViewer start up and load the sample PDF. Note it will change in real time if you edit any of the source files.

sample

Use more WebViewer APIs

To call more WebViewer API's, navigate to /src/WebViewer.svelte and add the API calls in the callback of the WebViewer constructor(you may need to make one if it is not provided).

const ele = document.getElementById('viewer');
window.WebViewer({
  path: '/lib'
}, ele)
  .then(instance => {
    // In this callback WebViewer will be initialized, so you can call WebViewer API here.
    instance.setTheme('dark');
  });

If your Svelte application is already running, you should see the theme change right away. Otherwise execute npm run dev again, then navigate to http://localhost:5000 and you should see that the theme has changed.

sample-dark

Next step

Guides Samples API docs