Some test text!

menu
search

Get started with WebViewer & Electron

This guide will help you integrate a free trial of WebViewer into Electron applications on the browser. It will help you clone the Electron 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.

linkPrerequisites

linkInitial setup

  1. Clone the webviewer-electron-sample repository:

    git clone https://github.com/PDFTron/webviewer-electron-sample.git
  2. Enter the directory and run npm install:

    cd webviewer-electron-sample
    npm install

    This will automatically download and extract the PDFTron WebViewer Package.

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

linkSample overview

After initial setup, the webviewer-electron-sample directory should be laid out like this:

webviewer-electron-sample
├── LICENSE
├── package.json
├── README.md
├── node_modules
│   ├── ...
├── public
│   ├── index.html
│   ├── files
│   │   ├── ...
│   └── lib
│       ├── ...
└── src
    ├── App.js
    └── main.js

Notable files and directories include:

File/FolderDescription
LICENSELists the copyright and license information.
package.jsonLists the manifest of the project and contains the author/version metadata.
publicContains the static assets such as the main HTML page index.html, the WebViewer libraries and the sample PDF file
srcContains the .js files for the Electron project.

In short, main.js handles the OS checks and creates the main window for the application with a link to index.html.

App.js instantiates the WebViewer in the viewer element outlined by index.html. It is also where the WebViewer API calls are placed.

linkRun the sample

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

    npm start

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

    Electron_App

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

linkUse more WebViewer APIs

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:

WebViewer({...}, wvElement
    .then(function(instance) {
        var docViewer = instance.docViewer;
        var annotManager = instance.annotManager;
        // call methods from instance, docViewer and annotManager as needed. 
        // you can also access major namespaces from the instance as follows:
        // var Tools = instance.Tools;
        // var Annotations = instance.Annotations;

        // See https://www.pdftron.com/documentation/web/guides/basic-functionality for more info.
        docViewer.on('documentLoaded', function() {
                // call methods relating to the loaded document
    });
});

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

instance.setTheme('dark');

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

Electron_Dark_Theme

linkNext step

GuidesSamplesAPI docs

You can find the full source code for this project here.

linkTroubleshooting

  • Network Failure

    This error might occur if the initial document is missing or inaccessible. This might happen due to our sample structure changing. You can use a URL or local file placed under the root directory of the project instead.

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

Learn more
close