Some test text!
Windows / Guides / 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.
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
git clone https://github.com/PDFTron/webviewer-electron-sample.git
Enter the directory and run
cd webviewer-electron-sample npm install
This will automatically download and extract the Apryse WebViewer Package.
You are now ready to run the sample or use more WebViewer APIs.
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:
|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 |
|src||Contains the |
main.js handles the OS checks and creates the main window for the application with a link to
App.js instantiates the WebViewer in the
viewer element outlined by
index.html. It is also where the WebViewer API calls are placed.
To run the sample, make sure you are in the
webviewer-electron-sample directory and execute
You should see the application start up. It will load the WebViewer and display the PDF sample in
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:
For example, if you want to change the theme of the WebViewer to dark mode, you would add the following:
npm start again and the theme of the viewer will change:
More information about fixing the
Network Failure issue on WebViewer.
Get the answers you need: Support