Integration

This guide will walk you through integrating PSPDFKit for Web with your project for server-backed deployment.

Prerequisites

  1. Include pspdfkit.js in your HTML page. This file is accessible at the root path of the server. If you set up the server at https://pspdfkit.example.com, you can find the file located at https://pspdfkit.example.com/pspdfkit.js.
  2. Add a <div> with a defined width and height (can be 100%) where the component will be mounted. PSPDFKit for Web adapts to the dimensions of this element. This way, applying responsive rules will work as expected.
  3. Initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load().

Here’s a basic example:

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
<!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',
        documentId: '<document_id>',
        authPayload: { jwt: '<jwt>' },
        instant: true
      }).then(function(instance) {
        console.log('PSPDFKit loaded', instance)
      }).catch(function(error) {
        console.error(error.message)
      })
    </script>
  </body>
</html>

The <document_id> placeholder in the code above should be replaced by the identifier of an existing document on the PSPDFKit Server. See the server API documentation or the example projects for information on how to upload documents.

The <jwt> placeholder should be replaced with a valid and signed JSON Web Token (JWT). See the Client Authentication guide for details.

Once you have the server running and available at https://pspdfkit.your-site.com, load the example HTML page in a web browser and you should see it display the specified document.

Please keep in mind that data stored in the beta version server will be deleted when migrating to the release version.

JavaScript API

PSPDFKit for Web can be configured and controlled via its JavaScript API. It will be added to the window object after the JavaScript file is evaluated.

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
25
/**
 * PSPDFKit.load() accepts a configuration object with the following required values:
 *
 * container {string | HTMLElement} — Selector or element where PSPDFKit will be mounted.
 * documentId {string}  — Document ID to load.
 * authPayload {Object} — JSON Web Token in the format `{ jwt: 'xxx.xxx.xxx' }`.
 * instant {boolean}    — The trial release gives you the option to try PSPDFKit Instant —
 *                        our real-time, cross-platform, sync engine — by setting `instant: true`.
 */
PSPDFKit.load({
  container: "#pspdfkit",
  documentId: documentId,
  authPayload: authPayload,
  instant: true
})
  .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
25
/**
 * PSPDFKit.load() accepts a configuration object with the following required values:
 *
 * container {string | HTMLElement} — Selector or element where PSPDFKit will be mounted.
 * documentId {string}  — Document ID to load.
 * authPayload {Object} — JSON Web Token in the format `{ jwt: 'xxx.xxx.xxx' }`.
 * instant {boolean}    — The trial release gives you the option to try PSPDFKit Instant —
 *                        our real-time, cross-platform, sync engine — by setting `instant: true`.
 */
PSPDFKit.load({
  container: "#pspdfkit",
  documentId: documentId,
  authPayload: authPayload,
  instant: true
})
  .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);
  });