Integrate into an Electron Project
This guide will walk you through the steps necessary to integrate PSPDFKit for Electron into your project.
PSPDFKit for Electron is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.
PSPDFKit for Electron shares the same APIs as PSPDFKit for Web Standalone, so use the Web documentation when customizing your Electron application.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Select the preferred products
Requirements
-
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Creating a New Project
-
Initialize a new npm workspace in an empty directory:
yarn init -y
npm init -y
-
Install Electron and
electron-packager
as dev dependencies:
yarn add --dev electron electron-packager
npm install --dev electron electron-packager
-
In the
package.json
file in the root folder of your application, add"start": "electron ."
to thescripts
section. The end result will be similar to the following:
{ "name": "pspdfkit-electron-example", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "electron": "^19.0.0", "electron-packager": "^15.5.1" }, "scripts": { "start": "electron ." } }
Adding PSPDFKit
-
PSPDFKit for Electron is installed as an npm package. This will add a
pspdfkit
dependency to your application’spackage.json
:
yarn add pspdfkit
npm install pspdfkit
-
Copy the PSPDFKit for Web library assets to the
public
directory:
cp -R ./node_modules/pspdfkit/dist/ ./public/
Displaying a PDF
-
Rename the PDF document you want to display in your application to
document.pdf
, and then add the PDF document to thepublic
directory. You can use this demo document as an example. -
In the root folder of your application, create an
index.html
file with the following content:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>PSPDFKit for Electron Example App</title> <style> html, body { margin: 0; padding: 0; background: #f6f7fa; } header { display: none; } #root { width: 100vw; height: 100vh; } </style> </head> <body> <header></header> <div id="root"></div> <script src="./public/pspdfkit.js"></script> <script type="module"> let instance = null; async function load(document) { if (instance) { PSPDFKit.unload(instance); hasUnsavedAnnotations = false; instance = null; } const configuration = { document, container: "#root", appName: "pspdfkit-electron-example", // Add when using a license key // licenseKey: "LICENSE KEY GOES HERE", }; instance = await PSPDFKit.load(configuration); } window.onload = () => load("./public/document.pdf"); </script> </body> </html>
-
In the root folder of your application, create a
preload.js
file with the following content. This script runs before the main renderer process:
const { contextBridge } = require("electron"); const { documentExport, documentImport, askUserToDiscardChanges, } = require("./lib/modals"); // Use the recommended, safe way of selectively exposing the capabilities // of the Node.js API to the browser context. // Electron helpers exposed in the browser context as `window.electron`. contextBridge.exposeInMainWorld("electron", { processPlatform: () => process.platform, documentExport, documentImport, askUserToDiscardChanges, });
-
In the root folder of your application, create an
index.js
file with the following content. This is the main JavaScript file that gets access to the preload script inside theBrowserWindow
constructor’swebPreferences
option:
const { app, BrowserWindow } = require('electron'); const path = require('path'); const url = require("url"); function createWindow () { const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) mainWindow.loadURL( url.format({ pathname: path.join(__dirname, "index.html"), protocol: "file:", slashes: true, }) ); } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() })
-
Start the app:
yarn start
npm start