Some test text!

menu
search

Electron

Welcome to PDFTron. This guide will help you with integrating the WebViewer SDK into your Electron application. After you clone the Electron Sample repository and walk through the project structure, you can see how to call other WebViewer API.

linkPrerequisites

  1. Node.js and npm
  2. Electron

linkSetup

  1. Clone our Electron sample by executing

    git clone https://github.com/PDFTron/webviewer-electron-sample.git
  2. Once cloned, navigate into the webviewer-electron-sample directory and install all the required dependencies by executing

    npm install

    npm will also download the PDFTron WebViewer and extract it to /public/lib.

  3. You are ready 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:

    drawing

linkYou are now ready to use more WebViewer APIs for your application.

linkSample Overview

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

webviewer-electron-sample
├── LICENSE
├── package.json
├── README.md
├──

Notable files and directories include:

  • LICENSE lists the copyright and license information.
  • package.json lists the manifest of the project and contains the author/version metadata.
  • public contains the static assets such as the main HTML page index.html, the WebViewer libraries and the sample PDF file.
  • src contains 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.

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:

drawing

You can learn about and add more features by reading our guides, samples and API.

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

linkTroubleshooting

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

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