Getting started on Electron

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

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

  1. Initialize a new npm workspace in an empty directory:

yarn init -y
npm init -y

  1. Install Electron and electron-packager as dev dependencies:

yarn add --dev electron electron-packager
npm install --dev electron electron-packager

  1. In the package.json file in the root folder of your application, add "start": "electron ." to the scripts 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

  1. PSPDFKit for Electron is installed as an npm package. This will add a pspdfkit dependency to your application’s package.json:

yarn add pspdfkit
npm install pspdfkit

  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/ ./public/

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. 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>

  1. 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,
});

  1. 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 the BrowserWindow constructor’s webPreferences 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()
})

  1. Start the app:

yarn start
npm start

Next Steps

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:

Adding PSPDFKit

  1. PSPDFKit for Electron is installed as an npm package. This will add a pspdfkit dependency to your application’s package.json:

yarn add pspdfkit
npm install pspdfkit

  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/ ./public/

Displaying a PDF

  1. Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.

  2. In the root folder of your application, add the following to the index.html file in the place where you want to add the PDF viewer:

<!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>

  1. Make sure you’ve enabled the file protocol in your main process:

// Make sure to enable access to the local file system. This is required
// to load PDF files and PSPDFKit dependencies from the local file system.
electron.protocol.registerSchemesAsPrivileged([
  {
    scheme: "file",
    privileges: { secure: true, standard: true },
  },
]);

  1. Start the app:

yarn start
npm start

Next Steps