Integration

This guide will walk you through integrating PSPDFKit for Electron with your Electron project.

Prerequisites

If you haven’t yet added PSPDFKit for Electron to your project, please read our Adding to Your Project guide.

Integrating PSPDFKit for Electron

  1. Set up a mount target in the HTML file of your renderer process.

    The HTML file will be set via the loadURL method of a BrowserWindow:

    Copy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    <!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">
      </head>
      <body>
        <!-- Element where PSPDFKit will be mounted. -->
        <div id="pspdfkit" style="width: 100%; height: 480px;"></div>
    
        <script>
          // Invoke the JavaScript for the renderer process.
          require("./renderer.js");
        </script>
      </body>
    </html>
    
  2. Require pspdfkit in your renderer process JavaScript.

  3. Make sure you’ve enabled the file protocol.

  4. Initialize PSPDFKit for Electron in JavaScript by calling PSPDFKit.load():

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/renderer.js

const webFrame = require("electron").webFrame;
webFrame.registerURLSchemeAsPrivileged("file");

const PSPDFKit = require("pspdfkit");

PSPDFKit.load({
  container: "#pspdfkit",
  pdf: "<pdf-file-path>",
  licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
})
  .then(instance => {
    console.log("PSPDFKit loaded", instance);
  })
  .catch(error => {
    console.error(error.message);
  });
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/renderer.js

var webFrame = require("electron").webFrame;
webFrame.registerURLSchemeAsPrivileged("file");

var PSPDFKit = require("pspdfkit");

PSPDFKit.load({
  container: "#pspdfkit",
  pdf: "<pdf-file-path>",
  licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
})
  .then(function(instance) {
    console.log("PSPDFKit loaded", instance);
  })
  .catch(function(error) {
    console.error(error.message);
  });

Configuration

The <pdf-file-path> placeholder in the code above should be replaced with the PDF filename/URI you wish to load. Alternatively, pdf can be an ArrayBuffer if, for example, you want to fetch the PDF files manually.

For more information, please refer to the API documentation and to our Importing and Exporting guides, where we explain how to load and persist PDF changes and annotations.

JavaScript API

PSPDFKit for Electron can be configured and controlled via its JavaScript API.

Refer to our customization guides and the API documentation for full details:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const PSPDFKit = require("pspdfkit");

/**
 * PSPDFKit.load() accepts a configuration object with the following required values:
 *
 * container {string|HTMLElement} — Selector or element where PSPDFKit will be mounted.
 * pdf {string|ArrayBuffer} — The URL to the PDF document or the read PDF content as `ArrayBuffer`.
 * licenseKey {string} — PSPDFKit for Electron license key from https://customers.pspdfkit.com.
 */
PSPDFKit.load({
  container: container,
  pdf: "default.pdf",
  licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
})
  .then(instance => {
    instance.totalPageCount; // => 10

    const viewState = instance.viewState;
    viewState.currentPageIndex; // => 0
    instance.setViewState(viewState.set("currentPageIndex", 1));
  })
  .catch(error => {
    console.error(error.message);
  });
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var PSPDFKit = require("pspdfkit");

/**
 * PSPDFKit.load() accepts a configuration object with the following required values:
 *
 * container {string|HTMLElement} — Selector or element where PSPDFKit will be mounted.
 * pdf {string|ArrayBuffer} — The URL to the PDF document or the read PDF content as `ArrayBuffer`.
 * licenseKey {string} — PSPDFKit for Electron license key from https://customers.pspdfkit.com.
 */
PSPDFKit.load({
  container: container,
  pdf: "default.pdf",
  licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
})
  .then(function(instance) {
    instance.totalPageCount; // => 10

    const viewState = instance.viewState;
    viewState.currentPageIndex; // => 0
    instance.setViewState(viewState.set("currentPageIndex", 1));
  })
  .catch(function(error) {
    console.error(error.message);
  });

Example Application

We’ve prepared a ready-to-use example project to help you get started quickly.