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:
1 2 | # From the built project folder python3 -m http.server 8080 |
Or, use the npm serve
package:
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
- 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 athttps://pspdfkit.example.com
, you will find the file located athttps://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 athttps://pspdfkit.example.com/assets/pspdfkit.js
. The only constraint is that the library files should all be in the same folder. - Initialize PSPDFKit for Web in JavaScript by calling
PSPDFKit.load()
.
Here’s a basic example:
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
- Require
pspdfkit
in your application. - Initialize PSPDFKit for Web in JavaScript by calling
PSPDFKit.load()
:
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); }); |
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:
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:
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); }); |
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 |