PDF Web Server Integration with Cloud PDF Viewer

To load a document in PSPDFKit for Web from Document Engine, pass the document’s ID, the JSON Web Token (JWT) for authentication, and information as to whether or not Instant real-time collaboration should be enabled in the configuration object passed to PSPDFKit.load():

PSPDFKit.load({
  documentId: "<document_id>",
  authPayload: { jwt: "<jwt>" },
  instant: true,
  serverUrl: "https://<your_document_engine_instance>/"
});

The <document_id> placeholder in the code above should be replaced by the identifier of an existing document on Document Engine. See the API reference for information on how to upload documents.

The <jwt> placeholder should be replaced with a valid and signed JWT. See the guide on generating a JWT for details.

The instant option configures whether or not PSPDFKit Instant should be enabled. PSPDFKit Instant is a real-time collaboration platform that enables your users to annotate documents simultaneously using PSPDFKit across iOS, Android, and their browser.

Note that the Web SDK infers the actual Document Engine URL from the base URL of the pspdfkit.js script tag. If you want to serve it from a different location than Document Engine, you’ll need to configure the serverUrl of your Document Engine instance in the Web SDK configuration.

How to Serve the Web SDK

This section outlines various options for serving PSPDFKit for Web for use as a Document Engine client in your web applications.

Serving from Document Engine

To load PSPDFKit for Web from Document Engine, load the main pspdfkit.js script like so:

<script src="https://<document_engine_url>/pspdfkit.js"></script>

Document Engine proxies this requests to our Web SDK CDN served at https://cdn.cloud.pspdfkit.com.

However, there are limitations to this approach, and it’s recommended to use the other options if:

  1. You can’t or don’t want to provide access to our CDN, as Document Engine won’t be able to proxy the files.

  2. You wish to use a newer version of the Web SDK, since Document Engine serves the latest version of the Web SDK at the time of the Document Engine release, which might be older than the latest Web release.

Serving from CDN

We maintain a CDN with the Web SDK bundle at https://cdn.cloud.pspdfkit.com. It’s used by Document Engine (see previous section) and it’s also available to be used by our customers.

To load PSPDFKit for Web from the CDN, load the main pspdfkit.js script like so:

<script src="https://cdn.cloud.pspdfkit.com/[email protected]/pspdfkit.js"></script>

Serving Manually

Finally, you can always serve the Web SDK manually within your applications. This has a benefit of working even offline or generally when you don’t want to or can’t provide access to our CDN.

PSPDFKit for Web ships as an npm package that’s usually installed via a package manager:

yarn add pspdfkit
npm install --save pspdfkit

Once it’s installed, you need serve the contents of /node_modules/pspdfkit/dist to your frontend. There are multiple options for serving it that depend on your environment.

The simplest option is to add it to the static assets of your application. You can then refer to it the same as you refer to any other script:

<script src="https://<your_app_url>/static/pspdfkit-web/pspdfkit.js"></script>

To copy the Web SDK files to your project’s static directory, you can make use of npm prepare script:

"scripts": {
  ...
  "prepare": "mkdir -p ./<your_projects_static_directory>/pspdfkit && cp -R ./node_modules/pspdfkit/dist/ ./public/pspdfkit/"
},

Make sure to replace the <your_projects_static_directory> placeholder with the actual directory for static files in your project.

Performance Considerations

To improve load times within your application, we recommend using preload and prefetch in adequate scenarios: preloading pspdfkit.js for sites on which you wish to display PDF content using PSPDFKit, and prefetching on sites on which no PDF content is visible.

The preload attribute of the <link> tag causes your browser to start downloading the resource of the <link> tag earlier in the lifecycle of your page, which will improve the overall feel of your site, while the prefetch attribute is used to fetch the resources you predict a user is likely to request. See the HTML specification for more information.

The implementation of these will depend on how you’re importing pspdfkit.js on your site/application. If your service is a regular website using vanilla JavaScript, you can add <link rel="prefetch" href="path/to/pspdfkit.js"> or <link rel="preload" href="path/to/pspdfkit.js"> within the <head> of the pages in question.

For websites and applications using modern frameworks that use webpack for bundling, this can be done using the /* webpackPrefetch: true */ or /* webpackPreload: true */ comments within your import(). Webpack will use this information to generate the appropriate <link rel="prefetch" ...> or <link rel="preload" ...> tags for you. See the webpack documentation for more information.