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 watch a step-by-step video to help you get started.

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

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

• Download and install Electron.
• Platform specific prerequisites. Electron applications can be built for several platforms and each has its own prerequisites. Please ensure they are fulfilled for your required platform by referring to the electron.js documentation.
• Get your Apryse trial key.

Clone the webviewer-samples repository:

1git clone --depth=1 https://github.com/ApryseSDK/webviewer-samples.git
2cd webviewer-samples

Enter the sample directory and run npm install:

1cd webviewer-electron
2npm install

This will automatically download and extract the Apryse WebViewer Package.

To run the sample, make sure you are in the webviewer-electron directory and execute

1npm start

You should see the application start up. It will load the WebViewer and display the PDF sample in /public/files:

If you run into issues with installing and/or running the application, please return and ensure you have the prerequisites installed.

To call more WebViewer APIs, open /src/App.js in your favorite text editor and add the API calls to the callback for the WebViewer instantiation. Add your own license key in place of 'YOUR_LICENSE_KEY'.:

1WebViewer({
2    licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
3}, wvElement
4	.then(instance => {
5        const { Core, UI } = instance;
6        const { documentViewer, annotationManager, Annotations, Tools } = instance.Core;
7
8        // See https://docs.apryse.com/web/guides/ for more info.
9        documentViewer.addEventListener('documentLoaded', function() {
10            // call methods relating to the loaded document
11        });
12});

1WebViewer({
2    licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
3}, wvElement
4	.then(instance => {
5		const { docViewer, annotManager } = instance;
6		// call methods from instance, docViewer and annotManager as needed.
7		// you can also access major namespaces from the instance as follows:
8		// const Tools = instance.Tools;
9		// const Annotations = instance.Annotations;
10
11		// See https://docs.apryse.com/web/guides/ for more info.
12		docViewer.on('documentLoaded', () => {
13            // call methods relating to the loaded document
14	    });
15});

For example, if you want to change the theme of the WebViewer to dark mode, you would add the following:

1instance.UI.setTheme('dark');

1instance.setTheme('dark');

Execute npm start again and the theme of the viewer will change:

Network Failure More information about fixing the Network Failure issue on WebViewer.