Section:

Integrate WebViewer JavaScript PDF Viewer & Editor into an Electron Desktop App

This guide will show you how to integrate WebViewer Document Viewer & Editor into an Electron desktop application.

You can also download a ready-to-go sample on GitHub.

Prerequisites

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

Quick start video

This video teaches you the fundamentals of installing and initializing WebViewer in any web application. If you wish, you may skip this section and proceed to the steps below.

1. Scaffold your project

If you already have an Electron app, skip to step 2.

First, create a new folder to put our project in an navigate into it. You can use any value for the project name.

shell

1mkdir <project-name>
2cd <project-name>

Now we can initialize our project by running the following command.

shell

1npm init

You will be asked a set of questions. There is one rule to follow for these questions:

  • "entrypoint" should be main.js

You may enter any value for the other questions.

After answering all the questions, you should have a package.json file in the folder you created.

Now, we can install Electron.

shell

1npm install --save-dev electron

Now in our package.json file, we can add a script to start Electron.

JSON

1{
2  "scripts": {
3    "start": "electron ."
4  }
5}
6

Lastly, we can create the Javascript file that will be used to run our application. Create an empty file called main.js

2. Install WebViewer and copy dependencies

Now we can install WebViewer.

shell

1npm i @pdftron/webviewer

In addition to installing WebViewer, we will need to set up a script to copy the static WebViewer dependencies into statically served folder in your project. The reason for this is because WebViewer contains many assets that cannot be bundled by the build system. Instead, these assets need to be served statically.

In package.json we will add a command that copies these static assets to a lib folder. You'll also notice that we run this new command before the start command we added to ensure the files are always in the proper place when running our app.

JSON

1{
2  "scripts": {
3    "start": "npm run copy-webviewer && electron .",
4    "copy-webviewer": "mkdir -p ./lib/webviewer && cp -a ./node_modules/@pdftron/webviewer/public/* ./lib/webviewer"
5  }
6}

Read more about copying WebViewer static assets.

3. Implement WebViewer

a. Create an index.html file

If you already have an html file in your project, skip to step 3b.

Next, we need to create an index.html file that will be used to render our app. Create this file and add the following code.

HTML

index.html

1<html>
2  <head>
3    <style>
4      
5    </style>
6  </head>
7
8  <body style="margin: 0; padding: 0;">
9
10  </body>
11</html>

b. Import WebViewer and create a container

Next, we can import the WebViewer library and create a DOM element for it to mount to.

In the <head> block, add the following code:

HTML

1<script src='./node_modules/@pdftron/webviewer/webviewer.min.js'></script>

Somewhere in the <body>, create an empty div with the ID viewer. Set the height of this div to 100vh (if you already have your own project, you may wish to style this differently).

HTML

1<div id="viewer" style="height: 100vh"></div>

c. Load the index.html file with Electron

In our main.js file, we can load this HTML file using the following code.

JavaScript

main.js

1const { app, BrowserWindow } = require('electron')
2
3const createWindow = () => {
4  const win = new BrowserWindow({
5    width: 800,
6    height: 600
7  })
8
9  win.loadFile('index.html')
10}
11
12app.whenReady().then(() => {
13  createWindow()
14})

d. Initialize WebViewer

Now we are ready to initialize WebViewer. This needs to be done in a render process.

Create a file called render.js and add the following code.

JavaScript

render.js

1const viewerElement = document.getElementById("viewer");
2
3WebViewer(
4  {
5    path: "./lib/webviewer",
6    initialDoc: "https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf",
7    licenseKey: "YOUR_LICENSE_KEY", // Replace with your Apryse trial key
8  },
9  viewerElement
10).then((instance) => {
11
12});

Lastly, we need to import this renderer script in our index.html file. Add this code to the bottom of the <body>.

HTML

index.html

1<body>
2  <!-- Other content -->
3  
4  <script defer src="render.js"></script>
5</body>

Now, when we run npm start, our app should load with WebViewer displaying the default document!

Next steps

View the GitHub sample to see how to add more functionality to our app. Otherwise, check out the resources below.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales