Integration

This guide will walk you through integrating PSPDFKit for Web with your project for standalone deployment.

Prerequisites

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

Note that PSPDFKit for Web automatically fetches the necessary library files at startup time via XHR (AJAX) requests. These requests require the artifacts to be in the same directory as the pspdfkit.js entry point.

Because of security restrictions, browsers are typically not allowed to make requests to the local file system; therefore, PSPDFKit for Web artifacts must be served from your (local) web server.

To start a simple web server, you can use Python’s SimpleHTTPServer module:

Shell
1
2

# From the built project folder
python3 -m http.server 8080

Or, use the npm serve package:

Shell
1
2

npm install --global serve
serve -l 8080 ./

For a working example, you may want to check out our webpack example application.

Note that the Content-Type header for the pspdfkit.wasm file must be set to application/wasm. Otherwise, you might get a Response has unsupported MIME type error.

Integration Modes

PSPDFKit for Web is distributed as a UMD module, which means it can be consumed as a global variable window.PSPDFKit or as a CommonJS/AMD module.

ℹ️ Note: We ship a minified version of the PSPDFKit module. This is important because we’ve seen reports that the minification can break the implementation, so we recommend excluding it from any preprocessor step.

In the beginning, independent of your integration mode, open your HTML page and add a <div> with a defined width and height where the component will be mounted (this can be 100% if the parent element has a height that is not set to auto).

PSPDFKit for Web adapts to the dimensions of this element. In this way, applying responsive rules will work as expected.

Integrate as a Global Variable

  1. After downloading and extracting the PSPDFKit for Web archive, include pspdfkit.js in your HTML page. The framework files can be served from anywhere in your (local) web server. If you set up the server at https://pspdfkit.example.com, you will find the file located at https://pspdfkit.example.com/pspdfkit.js. Similarly, if the files are in a subdirectory in your web server — for example, assets — they will be accessible accordingly at https://pspdfkit.example.com/assets/pspdfkit.js. The only constraint is that the library files should all be in the same folder.
  2. Initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load().

Here’s a basic example:

HTML
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
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <!-- 1. Include required files. -->
    <script src="https://pspdfkit.your-site.com/pspdfkit.js"></script>

    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body>
    <!-- 2. Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 480px;"></div>

    <!-- 3. Initialize PSPDFKit. -->
    <script>
      PSPDFKit.load({
        container: "#pspdfkit",
        document: "<pdf-file-path>",
        licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
      })
        .then(function(instance) {
          console.log("PSPDFKit loaded", instance);
        })
        .catch(function(error) {
          console.error(error.message);
        });
    </script>
  </body>
</html>

Please note that it’s not a security risk to use plain license keys on client-side code. License keys can’t be reused by third parties since they’re tied to your domain. Additionally, there’s no personal information linked to them.

Integrate as a Module

  1. Require pspdfkit in your application.
  2. Initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():
ES6+
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// src/index.js

import PSPDFKit from "pspdfkit";

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

// src/index.js

var PSPDFKit = require("pspdfkit");

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

Require your JavaScript file from your HTML page:

HTML
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>

    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <body>
    <!-- 2. Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 480px;"></div>
    <script src="https://pspdfkit.your-site.com/dist/index.js"></script>
  </body>
</html>

As explained in the previous section, it’s not a security risk to use plain license keys on client-side code since they’re tied to your domain and there’s no personal information linked to them.

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 are reading PDFs from the file system using the HTML FileReader API.

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 Web can be configured and controlled via its JavaScript API.

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

ES6+
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/**
 * 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 Web license key from https://customers.pspdfkit.com.
 */
PSPDFKit.load({
  container: container,
  document: "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);
  });
JavaScript
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/**
 * 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 Web license key from https://customers.pspdfkit.com.
 */
PSPDFKit.load({
  container: container,
  document: "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 encourage you to check out our webpack example to see how to set up and build a simple standalone application.

Follow the links in the registration email and then open this page to find your license key below: 

YOUR_LICENSE_KEY_GOES_HERE

Was this page helpful? We're happy to answer any questions.

The PSPDFKit SDK is a framework that allows you to view, annotate, sign, and fill PDF forms on iOS, Android, Windows, macOS, and Web. PSPDFKit Instant adds real-time collaboration features to seamlessly share, edit, and annotate PDF documents.