As of July 2021, our products no longer require a trial license key.
Integrate into a Vanilla JavaScript Project
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module.
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install --save pspdfkit
Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:
cp -R ./node_modules/pspdfkit/dist/ ./assets/
Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Integrating into Your Project
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.
Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module.
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install --save pspdfkit
Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:
cp -R ./node_modules/pspdfkit/dist/ ./assets/
Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Integrating into Your Project
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.
Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
Import pspdfkit into your application and initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():
import "./assets/pspdfkit.js";
// We need to inform PSPDFKit where to look for its library assets, i.e. the location of the `pspdfkit-lib` directory.const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;
PSPDFKit.load({
baseUrl,
container: "#pspdfkit",
document: "document.pdf"
})
.then(instance => {
console.log("PSPDFKit loaded", instance);
})
.catch(error => {
console.error(error.message);
});
Import index.js into your HTML page:
<script type="module" src="index.js"></script>
See the full index.html file below:
<!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>
<!-- Element where PSPDFKit will be mounted. -->
<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
<script type="module" src="index.js"></script>
</body>
</html>
Serving Your Website
You’ll use the npm serve package as a simple HTTP server.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.
Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Integrating into Your Project
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.
Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.
Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Integrating into Your Project
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.
Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
Import pspdfkit into your application and initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():
import "./assets/pspdfkit.js";
// We need to inform PSPDFKit where to look for its library assets, i.e. the location of the `pspdfkit-lib` directory.const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;
PSPDFKit.load({
baseUrl,
container: "#pspdfkit",
document: "document.pdf"
})
.then(instance => {
console.log("PSPDFKit loaded", instance);
})
.catch(error => {
console.error(error.message);
});
Import index.js into your HTML page:
<script type="module" src="index.js"></script>
See the full index.html file below:
<!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>
<!-- Element where PSPDFKit will be mounted. -->
<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
<script type="module" src="index.js"></script>
</body>
</html>
Serving Your Website
You’ll use the npm serve package as a simple HTTP server.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
In the src/components/ folder, create the PdfViewerComponent.js file with the following content. This adds a component wrapper for the PSPDFKit library:
import { useEffect, useRef } from "react";
exportdefaultfunction PdfViewerComponent(props) {
const containerRef = useRef(null);
useEffect(() => {
const container = containerRef.current;
let instance, PSPDFKit;
(asyncfunction() {
PSPDFKit = awaitimport("pspdfkit");
instance = await PSPDFKit.load({
// Container where PSPDFKit should be mounted.
container,
// The document to open.
document: props.document,
// Use the public directory URL as a base URL. PSPDFKit will download its library assets from here.
baseUrl: `${window.location.protocol}//${window.location.host}/${process.env.PUBLIC_URL}`
});
})();
return () => PSPDFKit && PSPDFKit.unload(container);
}, []);
return (
<div ref={containerRef} style={{ width: "100%", height: "100vh"}}/>
);
}
In the src folder, replace the contents of the App.js file with the following. This includes the newly created component in your app:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding PSPDFKit to Your Project
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web library assets to the public directory:
Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
In the src/components/ folder, create the PdfViewerComponent.js file with the following content. This adds a component wrapper for the PSPDFKit library:
import { useEffect, useRef } from "react";
exportdefaultfunction PdfViewerComponent(props) {
const containerRef = useRef(null);
useEffect(() => {
const container = containerRef.current;
let instance, PSPDFKit;
(asyncfunction() {
PSPDFKit = awaitimport("pspdfkit");
instance = await PSPDFKit.load({
// Container where PSPDFKit should be mounted.
container,
// The document to open.
document: props.document,
// Use the public directory URL as a base URL. PSPDFKit will download its library assets from here.
baseUrl: `${window.location.protocol}//${window.location.host}/${process.env.PUBLIC_URL}`
});
})();
return () => PSPDFKit && PSPDFKit.unload(container);
}, []);
return (
<div ref={containerRef} style={{ width: "100%", height: "100vh"}}/>
);
}
In your app, add the following below the lines beginning with import. This includes the newly created component in your app:
import PdfViewerComponent from './components/PdfViewerComponent';
function DocumentViewerComponent() {
return (
<div className="PDF-viewer">
<PdfViewerComponent
document={"document.pdf"}
/>
</div>
);
}
Add the following to the rendering function in your app:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Creating a New Project
Install the Angular CLI:
yarn global add @angular/cli
npm install -g @angular/cli
Create a new Angular application:
ng new my-app
The Angular CLI will ask you information about the app configuration. Accept the defaults by repeatedly pressing the Enter key.
Change to the created project directory:
cd my-app
Adding PSPDFKit
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install --save pspdfkit
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
In the angular.json file, add the following to the assets option:
Angular will now copy the PSPDFKit library assets to the assets directory before running your app.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the src/assets directory. You can use this demo document as an example.
In the src/app/ folder, replace the contents of the app.component.html file with the following:
<div class="app">
<!-- We'll mount the PSPDFKit UI to this element. -->
<div id="pspdfkit-container" style="width: 100%; height: 100vh"></div>
</div>
In the src/app/ folder, replace the contents of the app.component.ts file with the following:
import { Component } from "@angular/core";
import PSPDFKit from "pspdfkit";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["app.component.css"]
})
exportclass AppComponent {
title = "PSPDFKit for Web Angular Example";
ngAfterViewInit() {
PSPDFKit.load({
// Use the assets directory URL as a base URL. PSPDFKit will download its library assets from here.
baseUrl: location.protocol + "//" + location.host + "/assets/",
document: "/assets/Document.pdf",
container: "#pspdfkit-container",
}).then(instance => {
// For the sake of this demo, store the PSPDFKit for Web instance// on the global object so that you can open the dev tools and// play with the PSPDFKit API.
(window asany).instance = instance;
});
}
}
Start the app and open it in your default browser:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding PSPDFKit
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install --save pspdfkit
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
In the angular.json file, add the following to the assets option:
Angular will now copy the PSPDFKit library assets to the assets directory before running your app.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the src/assets directory. You can use this demo document as an example.
Generate a new PDF viewer component:
ng generate component pdf-viewer
In the src/app/pdf-viewer folder, replace the contents of the pdf-viewer.component.html file with the following:
In the src/app/pdf-viewer folder, replace the contents of the pdf-viewer.component.ts file with the following. This initializes PSPDFKit in the PDF viewer component:
import { Component, OnInit } from '@angular/core';
import PSPDFKit from 'pspdfkit';
@Component({
selector: 'pdf-viewer',
templateUrl: './pdf-viewer.component.html',
styleUrls: ['./pdf-viewer.component.css']
})
exportclass PdfViewerComponent implements OnInit {
ngOnInit(): void {
PSPDFKit.load({
// Use the assets directory URL as a base URL. PSPDFKit will download its library assets from here.
baseUrl: location.protocol + "//" + location.host + "/assets/",
document: "/assets/document.pdf",
container: "#pspdfkit-container",
}).then(instance => {
// For the sake of this demo, store the PSPDFKit for Web instance// on the global object so that you can open the dev tools and// play with the PSPDFKit API.
(window asany).instance = instance;
});
}
}
In the src/app/ folder, add the following to the app.component.html file in the place where you want to add the PDF viewer:
<pdf-viewer></pdf-viewer>
Start the app and open it in your default browser:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
In the src/components/ folder, create the PSPDFKitContainer.vue file with the following content. This adds a component wrapper for the PSPDFKit library:
<template>
<div class="pdf-container"></div>
</template>
<script>
import PSPDFKit from "pspdfkit";
/**
* PSPDFKit for Web example component.
*/exportdefault {
name: 'PSPDFKit',
/**
* The component receives `pdfFile` as a prop, which is type of `String` and is required.
*/
props: {
pdfFile: {
type: String,
required: true,
},
},
/**
* We wait until the template has been rendered to load the document into the library.
*/
mounted() {
this.loadPSPDFKit().then((instance) => {
this.$emit("loaded", instance);
});
},
/**
* We watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
*/
watch: {
pdfFile(val) {
if (val) {
this.loadPSPDFKit();
}
},
},
/**
* Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
*/
methods: {
async loadPSPDFKit() {
PSPDFKit.unload(".pdf-container");
return PSPDFKit.load({
// access the pdfFile from props
document: this.pdfFile,
container: ".pdf-container",
});
},
},
/**
* Clean up when the component is unmounted so it's ready to load another document (not needed in this example).
*/
beforeUnmount() {
PSPDFKit.unload(".pdf-container");
},
};
</script>
<style scoped>
.pdf-container {
height: 100vh;
}
</style>
In the src folder, replace the contents of the App.vue file with the following. This includes the newly created component in your app:
<template>
<div id="app">
<label for="file-upload" class="custom-file-upload">
Open PDF
</label>
<input id="file-upload" type="file" @change="openDocument" class="btn" />
<PSPDFKitContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
</div>
</template>
<script>
import PSPDFKitContainer from "@/components/PSPDFKitContainer";
exportdefault {
data() {
return {
pdfFile: this.pdfFile || "/document.pdf",
};
},
/**
* Render the `PSPDFKitContainer` component.
*/
components: {
PSPDFKitContainer,
},
/**
* Our component has two methods — one to check when the document is loaded, and the other to open the document.
*/
methods: {
handleLoaded(instance) {
console.log("PSPDFKit has loaded: ", instance);
// Do something.
},
openDocument(event) {
// To access the Vue.js instance data properties, use `this` keyword.if (this.pdfFile && this.pdfFile.startsWith('blob:')) {
window.URL.revokeObjectURL(this.pdfFile);
}
this.pdfFile = window.URL.createObjectURL(event.target.files[0]);
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
}
body {
margin: 0;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
border-radius: 4px;
display: inline-block;
padding: 6px12px;
cursor: pointer;
background:#4A8FED;
padding:10px;
color:#fff;
font:inherit;
font-size: 16px;
font-weight: bold;
}
</style>
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding PSPDFKit
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install pspdfkit
Create a new directory under public called js:
mkdir -p public/js
Copy the PSPDFKit for Web library assets to the public/js directory:
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
In the src/components/ folder, create the PSPDFKitContainer.vue file with the following content. This adds a component wrapper for the PSPDFKit library:
<template>
<div class="pdf-container"></div>
</template>
<script>
import PSPDFKit from "pspdfkit";
/**
* PSPDFKit for Web example component.
*/exportdefault {
name: 'PSPDFKit',
/**
* The component receives `pdfFile` as a prop, which is type of `String` and is required.
*/
props: {
pdfFile: {
type: String,
required: true,
},
},
/**
* We wait until the template has been rendered to load the document into the library.
*/
mounted() {
this.loadPSPDFKit().then((instance) => {
this.$emit("loaded", instance);
});
},
/**
* We watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
*/
watch: {
pdfFile(val) {
if (val) {
this.loadPSPDFKit();
}
},
},
/**
* Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
*/
methods: {
async loadPSPDFKit() {
PSPDFKit.unload(".pdf-container");
return PSPDFKit.load({
// access the pdfFile from props
document: this.pdfFile,
container: ".pdf-container",
});
},
},
/**
* Clean up when the component is unmounted so it's ready to load another document (not needed in this example).
*/
beforeUnmount() {
PSPDFKit.unload(".pdf-container");
},
};
</script>
<style scoped>
.pdf-container {
height: 100vh;
}
</style>
In the src folder, add the newly created component to the App.vue file in the following way:
<template>
<div id="app">
<label for="file-upload" class="custom-file-upload">
Open PDF
</label>
<input id="file-upload" type="file" @change="openDocument" class="btn" />
<PSPDFKitContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
</div>
</template>
<script>
import PSPDFKitContainer from "@/components/PSPDFKitContainer";
exportdefault {
data() {
return {
pdfFile: this.pdfFile || "/document.pdf",
};
},
/**
* Render the `PSPDFKitContainer` component.
*/
components: {
PSPDFKitContainer,
},
/**
* Our component has two methods — one to check when the document is loaded, and the other to open the document.
*/
methods: {
handleLoaded(instance) {
console.log("PSPDFKit has loaded: ", instance);
// Do something.
},
openDocument(event) {
// To access the Vue.js instance data properties, use `this` keyword.if (this.pdfFile && this.pdfFile.startsWith('blob:')) {
window.URL.revokeObjectURL(this.pdfFile);
}
this.pdfFile = window.URL.createObjectURL(event.target.files[0]);
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
}
body {
margin: 0;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
border-radius: 4px;
display: inline-block;
padding: 6px12px;
cursor: pointer;
background:#4A8FED;
padding:10px;
color:#fff;
font:inherit;
font-size: 16px;
font-weight: bold;
}
</style>
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
In the pages folder, replace the contents of the index.js file with the following:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding PSPDFKit to Your Project
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web library assets to the public directory:
Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
In the pages folder, add the following code to the index.js file below the lines beginning with import:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Run the following command to install TypeScript globally:
npm install -g typescript
Creating a New Project
Run the following command to initialize a new npm workspace in an empty directory:
yarn init -y
npm init -y
In the root folder of your application, create a tsconfig.json file with the following content:
PSPDFKit for TypeScript is installed as an npm package. This will add a pspdfkit dependency to your application’s package.json:
yarn add pspdfkit
npm install pspdfkit
Run the following command to install the necessary dependencies for webpack, create a config directory, and place your webpack configuration file inside it:
In the config folder, add the following code to the webpack.js file:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const filesToCopy = [
// PSPDFKit files.
{
from: './node_modules/pspdfkit/dist/pspdfkit-lib',
to: './pspdfkit-lib',
},
// Application CSS.
{
from: './src/index.css',
to: './index.css',
},
// Example PDF.
{
from: './assets/document.pdf',
to: './document.pdf',
},
];
/**
* webpack main configuration object.
*/const config = {
entry: path.resolve(__dirname, '../src/index.ts'),
mode: 'development',
devtool: 'inline-source-map',
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js',
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
module: {
rules: [
// All files with a `.ts` or `.tsx` extension will be handled by `ts-loader`.
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
// Copy the WASM/ASM and CSS files to the `output.path`.new CopyWebpackPlugin({ patterns: filesToCopy }),
],
optimization: {
splitChunks: {
cacheGroups: {
// Creates a `vendor.js` bundle that contains external libraries (including `pspdfkit.js`).
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10,
enforce: true,
},
},
},
},
};
module.exports = config;
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the assets directory. You can use this demo document as an example.
In the src folder, create an index.html file with the following content. This adds an empty <div> element where PSPDFKit is loaded:
<!DOCTYPE html>
<html>
<head>
<title>PSPDFKit for Web — TypeScript example</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container"></div>
</body>
</html>
In the src folder, create an index.css file with the following content. This declares the height of the PSPDFKit element:
.container {
height: 100vh;
}
In the src folder, create an index.ts file with the following content:
import PSPDFKit from 'pspdfkit';
function load(document: string) {
console.log(`Loading ${document}...`);
PSPDFKit.load({
document,
container: '.container',
})
.then((instance) => {
console.log('PSPDFKit loaded', instance);
})
.catch(console.error);
}
load('document.pdf'); // Pass your PDF file.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding PSPDFKit and Configuring webpack
PSPDFKit for TypeScript is installed as an npm package. This will add a pspdfkit dependency to your application’s package.json:
yarn add pspdfkit
npm install pspdfkit
Run the following command to install the necessary dependencies for webpack, create a config directory, and place your webpack configuration file inside it:
In the config folder, add the following code to the webpack.js file:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const filesToCopy = [
// PSPDFKit files.
{
from: './node_modules/pspdfkit/dist/pspdfkit-lib',
to: './pspdfkit-lib',
},
// Application CSS.
{
from: './src/index.css',
to: './index.css',
},
// Example PDF.
{
from: './assets/document.pdf',
to: './document.pdf',
},
];
/**
* webpack main configuration object.
*/const config = {
entry: path.resolve(__dirname, '../src/index.ts'),
mode: 'development',
devtool: 'inline-source-map',
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js',
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
module: {
rules: [
// All files with a `.ts` or `.tsx` extension will be handled by `ts-loader`.
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
// Copy the WASM/ASM and CSS files to the `output.path`.new CopyWebpackPlugin({ patterns: filesToCopy }),
],
optimization: {
splitChunks: {
cacheGroups: {
// Creates a `vendor.js` bundle that contains external libraries (including `pspdfkit.js`).
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10,
enforce: true,
},
},
},
},
};
module.exports = config;
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the assets directory. You can use this demo document as an example.
In the src folder, create an index.html file with the following content. This adds an empty <div> element where PSPDFKit is loaded:
<!DOCTYPE html>
<html>
<head>
<title>PSPDFKit for Web — TypeScript example</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container"></div>
</body>
</html>
In the src folder, create an index.css file with the following content. This declares the height of the PSPDFKit element:
.container {
height: 100vh;
}
In the src folder, create an index.ts file with the following content:
import PSPDFKit from 'pspdfkit';
function load(document: string) {
console.log(`Loading ${document}...`);
PSPDFKit.load({
document,
container: '.container',
})
.then((instance) => {
console.log('PSPDFKit loaded', instance);
})
.catch(console.error);
}
load('document.pdf'); // Pass your PDF file.
Running the Project
Run the following command to install the serve package:
yarn global add serve
npm install --global serve
Add the following to the scripts section of the package.json file:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Creating a New Project
Create a new Svelte app using the degit tool with the Svelte template:
npx degit sveltejs/template my-svelte-project
Change to the created project directory:
cd my-svelte-project
Install the dependencies:
yarn install
npm install
Adding PSPDFKit to Your Project
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web library assets to the public directory:
Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
In the src folder, create a PdfViewerComponent.svelte file with the following content. This adds a component wrapper for the PSPDFKit library:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding PSPDFKit to Your Project
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web library assets to the public directory:
Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
In the src folder, create a PdfViewerComponent.svelte file with the following content. This adds a component wrapper for the PSPDFKit library:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Creating a New Project
Initialize a new npm workspace in an empty directory:
In the package.json file in the root folder of your application, add "start": "electron ." to the scripts section. The end result will be similar to the following:
PSPDFKit for Electron is installed as an npm package. This will add a pspdfkit dependency to your application’s package.json:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web library assets to the public directory:
cp -R ./node_modules/pspdfkit/dist/ ./public/
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
In the root folder of your application, create an index.html file with the following content:
In the root folder of your application, create a preload.js file with the following content. This script runs before the main renderer process:
const { contextBridge } = require("electron");
const {
documentExport,
documentImport,
askUserToDiscardChanges,
} = require("./lib/modals");
// Use the recommended, safe way of selectively exposing the capabilities// of the Node.js API to the browser context.// Electron helpers exposed in the browser context as `window.electron`.
contextBridge.exposeInMainWorld("electron", {
processPlatform: () => process.platform,
documentExport,
documentImport,
askUserToDiscardChanges,
});
In the root folder of your application, create an index.js file with the following content. This is the main JavaScript file that gets access to the preload script inside the BrowserWindow constructor’s webPreferences option:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding PSPDFKit
PSPDFKit for Electron is installed as an npm package. This will add a pspdfkit dependency to your application’s package.json:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web library assets to the public directory:
cp -R ./node_modules/pspdfkit/dist/ ./public/
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
In the root folder of your application, add the following to the index.html file in the place where you want to add the PDF viewer:
Make sure you’ve enabled the file protocol in your main process:
// Make sure to enable access to the local file system. This is required// to load PDF files and PSPDFKit dependencies from the local file system.
electron.protocol.registerSchemesAsPrivileged([
{
scheme: "file",
privileges: { secure: true, standard: true },
},
]);
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Using create-nuxt-app
To get started, use create-nuxt-app to create a new Nuxt.js project:
yarn create nuxt-app pspdfkit-app
npm init nuxt-app pspdfkit-app
This will ask you some questions. Choose the default options by pressing Enter. Once you answer all the questions, it’ll install the dependencies and create a new Nuxt.js project.
Change to the created project directory:
cd pspdfkit-app
Adding PSPDFKit
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web library assets to the static directory:
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the static directory. You can use this demo document as an example.
In the components folder, create a PSPDFKitContainer.vue file with the following content. This creates a component wrapper for the PSPDFKit library:
<template>
<div class="pdf-container"></div>
</template>
<script>
/**
* PSPDFKit for Web example component.
*/exportdefault {
name: "PSPDFKit",
/**
* The component receives `pdfFile` as a prop, which is type of `String` and is required.
*/
props: {
pdfFile: {
type: String,
required: true,
},
},
PSPDFKit: null,
/**
* Wait until the template has been rendered to load the document into the library.
*/
mounted() {
this.loadPSPDFKit().then((instance) => {
this.$emit("loaded", instance);
});
},
/**
* Watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
*/
watch: {
pdfFile(val) {
if (val) {
this.loadPSPDFKit();
}
},
},
/**
* Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
*/
methods: {
async loadPSPDFKit() {
import("pspdfkit")
.then((PSPDFKit) => {
this.PSPDFKit = PSPDFKit;
PSPDFKit.unload(".pdf-container");
return PSPDFKit.load({
document: this.pdfFile,
container: ".pdf-container",
baseUrl: "http://localhost:3000/",
});
})
.catch((error) => {
console.error(error);
});
},
},
};
</script>
<style scoped>
.pdf-container {
height: 100vh;
}
</style>
In the pages folder, replace the contents of the index.vue file with the following. This includes the newly created component in your app:
<template>
<div id="app">
<label for="file-upload" class="custom-file-upload"> Open PDF </label>
<input id="file-upload" type="file" @change="openDocument" class="btn" />
<PSPDFKitContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
</div>
</template>
<script>
import PSPDFKitContainer from "../components/PSPDFKitContainer.vue";
exportdefault {
name: "app",
/**
* Render the `PSPDFKitContainer` component.
*/
components: {
PSPDFKitContainer,
},
data() {
return {
pdfFile: this.pdfFile || "/document.pdf",
};
},
/**
* Our component has two methods — one to check when the document is loaded, and the other to open the document.
*/
methods: {
handleLoaded(instance) {
console.log("PSPDFKit has loaded: ", instance);
// Do something.
},
openDocument(event) {
if (this.pdfFile && this.pdfFile.startsWith("blob:")) {
window.URL.revokeObjectURL(this.pdfFile);
}
this.pdfFile = window.URL.createObjectURL(event.target.files[0]);
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
}
body {
margin: 0;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
border-radius: 4px;
display: inline-block;
padding: 6px12px;
cursor: pointer;
background: #4a8fed;
padding: 10px;
color: #fff;
font: inherit;
font-size: 16px;
font-weight: bold;
}
</style>
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding PSPDFKit
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web library assets to the static directory:
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the static directory. You can use this demo document as an example.
In the components folder, create a PSPDFKitContainer.vue file with the following content. This creates a component wrapper for the PSPDFKit library:
<template>
<div class="pdf-container"></div>
</template>
<script>
/**
* PSPDFKit for Web example component.
*/exportdefault {
name: "PSPDFKit",
/**
* The component receives `pdfFile` as a prop, which is type of `String` and is required.
*/
props: {
pdfFile: {
type: String,
required: true,
},
},
PSPDFKit: null,
/**
* Wait until the template has been rendered to load the document into the library.
*/
mounted() {
this.loadPSPDFKit().then((instance) => {
this.$emit("loaded", instance);
});
},
/**
* Watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
*/
watch: {
pdfFile(val) {
if (val) {
this.loadPSPDFKit();
}
},
},
/**
* Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
*/
methods: {
async loadPSPDFKit() {
import("pspdfkit")
.then((PSPDFKit) => {
this.PSPDFKit = PSPDFKit;
PSPDFKit.unload(".pdf-container");
return PSPDFKit.load({
document: this.pdfFile,
container: ".pdf-container",
baseUrl: "http://localhost:3000/",
});
})
.catch((error) => {
console.error(error);
});
},
},
};
</script>
<style scoped>
.pdf-container {
height: 100vh;
}
</style>
In the pages folder, add the newly created component to the index.vue file in the following way:
<template>
<div id="app">
<label for="file-upload" class="custom-file-upload"> Open PDF </label>
<input id="file-upload" type="file" @change="openDocument" class="btn" />
<PSPDFKitContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
</div>
</template>
<script>
import PSPDFKitContainer from "../components/PSPDFKitContainer.vue";
exportdefault {
name: "app",
/**
* Render the `PSPDFKitContainer` component.
*/
components: {
PSPDFKitContainer,
},
data() {
return {
pdfFile: this.pdfFile || "/document.pdf",
};
},
/**
* Our component has two methods — one to check when the document is loaded, and the other to open the document.
*/
methods: {
handleLoaded(instance) {
console.log("PSPDFKit has loaded: ", instance);
// Do something.
},
openDocument(event) {
if (this.pdfFile && this.pdfFile.startsWith("blob:")) {
window.URL.revokeObjectURL(this.pdfFile);
}
this.pdfFile = window.URL.createObjectURL(event.target.files[0]);
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
}
body {
margin: 0;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
border-radius: 4px;
display: inline-block;
padding: 6px12px;
cursor: pointer;
background: #4a8fed;
padding: 10px;
color: #fff;
font: inherit;
font-size: 16px;
font-weight: bold;
}
</style>
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Requirements
Visual Studio 2019 or above
Creating a New Project
Open Visual Studio and select New Solution in the File > New Solution… menu to create a new project for your application:
Choose the Web Application (Model-View-Controller) template:
Choose .NET 5.0 for the target framework:
When prompted, choose your app name (PSPDFKit_ASPNETExample) and use the default options:
Finish the project creation by confirming the next dialog steps.
Adding PSPDFKit
PSPDFKit for Web library files are distributed as an archive that can be extracted manually:
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to the wwwroot/lib directory in your project.
Make sure your wwwroot/lib folder contains the file pspdfkit.js and a pspdfkit-lib directory with library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section of our guides.
Integrating PSPDFKit
Integrate PSPDFKit directly in your app’s index view, Views/Home/Index.cshtml.
To clean out the UI, go to the Views/Shared/_Layout.cshtml file and keep only the @RenderBody() property:
<!-- Include PSPDFKit library -->
<script src="/lib/pspdfkit.js"></script>
<!-- Element where PSPDFKit will be mounted. -->
<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
<!-- Initialize PSPDFKit. -->
<script>
PSPDFKit.load({
container: "#pspdfkit",
document: "document.pdf",
})
.then(function (pspdfkitInstance) {
console.log("PSPDFKit loaded", pspdfkitInstance);
})
.catch(function (error) {
console.error(error.message);
});
</script>
Displaying the PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the wwwroot directory. You can use this demo document as an example.
Select Run > Start Debugging. This will start your app and open it in your default browser.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Create a new ASP.NET Core Web App (Model-View-Controller):
dotnet new mvc -o pspdfkit-aspnet-example
Change to the created project directory:
cd pspdfkit-aspnet-example
Adding PSPDFKit
PSPDFKit for Web library files are distributed as an archive that can be extracted manually:
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to the wwwroot/lib directory in your project.
Make sure your wwwroot/lib folder contains the file pspdfkit.js and a pspdfkit-lib directory with library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section of our guides.
Integrating PSPDFKit
Integrate PSPDFKit directly in your app’s index view, Views/Home/Index.cshtml.
To clean out the UI, go to the Views/Shared/_Layout.cshtml file and keep only the @RenderBody() property:
<!-- Include PSPDFKit library -->
<script src="/lib/pspdfkit.js"></script>
<!-- Element where PSPDFKit will be mounted. -->
<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
<!-- Initialize PSPDFKit. -->
<script>
PSPDFKit.load({
container: "#pspdfkit",
document: "document.pdf",
})
.then(function (pspdfkitInstance) {
console.log("PSPDFKit loaded", pspdfkitInstance);
})
.catch(function (error) {
console.error(error.message);
});
</script>
Displaying the PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the wwwroot directory. You can use this demo document as an example.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Requirements
Visual Studio 2019 or above
Adding PSPDFKit
PSPDFKit for Web library files are distributed as an archive that can be extracted manually:
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to the wwwroot/lib directory in your project.
Make sure your wwwroot/lib folder contains the file pspdfkit.js and a pspdfkit-lib directory with library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section of our guides.
Integrating PSPDFKit
Integrate PSPDFKit in your view, Views/Home/Index.cshtml.
Include pspdfkit.js. The path is relative to the wwwroot directory:
<script src="/lib/pspdfkit.js"></script>
Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the wwwroot directory. You can use this demo document as an example.
Select Run > Start Debugging. This will start your app and open it in your default browser.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
PSPDFKit for Web library files are distributed as an archive that can be extracted manually:
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to the wwwroot/lib directory in your project.
Make sure your wwwroot/lib folder contains the file pspdfkit.js and a pspdfkit-lib directory with library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section of our guides.
Integrating PSPDFKit
Integrate PSPDFKit in your view, Views/Home/Index.cshtml.
Include pspdfkit.js. The path is relative to the wwwroot directory:
<script src="/lib/pspdfkit.js"></script>
Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the wwwroot directory. You can use this demo document as an example.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Requirements
Visual Studio 2019 or above
Creating a New Project
Open Visual Studio and select New Solution in the File > New Solution… menu to create a new project for your application:
Choose the Blazor Server App project template:
Choose .NET 5.0 for the target framework:
When prompted, choose your app name (PSPDFKit_BlazorServer) and use the default options:
Finish the project creation by confirming the next dialog steps.
Adding PSPDFKit
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s wwwroot folder.
Make sure your wwwroot folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the wwwroot directory. You can use this demo document as an example.
To clean out the UI, go to the Shared/MainLayout.razor component and keep only the @Body property:
@inherits LayoutComponentBase
@Body
Go to the Home route located under the Pages/Index.razor file, and replace the contents of the file with the following:
Load the PSPDFKit SDK to Pages/_Host.cshtml before the </body> tag:
@* Include pspdfkit.js in your Pages/_Host.cshtml file *@
<script src="pspdfkit.js"></script>
@* Initialize PSPDFKit for Web in Blazor Server by calling PSPDFKit.load(): *@
<script>
function loadPDF(container, document) {
PSPDFKit.load({
container: container,
document: document
})
}
</script>
Serving Your Website
Select Run > Start Debugging. This will start your app and open it in your default browser.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s wwwroot folder.
Make sure your wwwroot folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the wwwroot directory. You can use this demo document as an example.
To clean out the UI, go to the Shared/MainLayout.razor component and keep only the @Body property:
@inherits LayoutComponentBase
@Body
Go to the Home route located under the Pages/Index.razor file, and replace the contents of the file with the following:
Load the PSPDFKit SDK to Pages/_Host.cshtml before the </body> tag:
@* Include pspdfkit.js in your Pages/_Host.cshtml file *@
<script src="pspdfkit.js"></script>
@* Initialize PSPDFKit for Web in Blazor Server by calling PSPDFKit.load(): *@
<script>
function loadPDF(container, document) {
PSPDFKit.load({
container: container,
document: document
})
}
</script>
Serving Your Website
Start the app in the root directory of your project:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Requirements
Visual Studio 2019 or above
Creating a New Project
Open Visual Studio and select New Solution in the File > New Solution… menu to create a new project for your application:
Choose the Blazor WebAssembly App project template:
Choose .NET 5.0 for the target framework:
When prompted, choose your app name (PSPDFKit_BlazorWASM) and use the default options:
Finish the project creation by confirming the next dialog steps.
Adding PSPDFKit
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s wwwroot folder.
Make sure your wwwroot folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the wwwroot directory. You can use this demo document as an example.
To clean out the UI, go to the Shared/MainLayout.razor component and keep only the @Body property:
@inherits LayoutComponentBase
@Body
Go to the Home route located under the Pages/Index.razor file, and replace the contents of the file with the following:
Load the PSPDFKit SDK loading code to wwwroot/index.html before the </body> tag:
<script src="pspdfkit.js"></script>
<!-- Initialize PSPDFKit for Web in Blazor WASM by calling PSPDFKit.load(): -->
<script>
function loadPDF(container, document) {
PSPDFKit.load({
container,
document,
});
}
</script>
Serving Your Website
Select Run > Start Debugging. This will start your app and open it in your default browser.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s wwwroot folder.
Make sure your wwwroot folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the wwwroot directory. You can use this demo document as an example.
To clean out the UI, go to the Shared/MainLayout.razor component and keep only the @Body property:
@inherits LayoutComponentBase
@Body
Go to the Home route located under the Pages/Index.razor file, and replace the contents of the file with the following:
Load the PSPDFKit SDK loading code to wwwroot/index.html before the </body> tag:
<script src="pspdfkit.js"></script>
<!-- Initialize PSPDFKit for Web in Blazor WASM by calling PSPDFKit.load(): -->
<script>
function loadPDF(container, document) {
PSPDFKit.load({
container,
document,
});
}
</script>
Serving Your Website
Start the app in the root directory of your project:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module.
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:
cp -R ./node_modules/pspdfkit/dist/ ./assets/
Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Integrating into Your Project
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.
In the index.html file in the root folder of your application, add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module.
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:
cp -R ./node_modules/pspdfkit/dist/ ./assets/
Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Integrating into Your Project
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.
In the index.html file in the root folder of your application, add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
Import pspdfkit into your application, and initialize PSPDFKit for Web in jQuery by calling PSPDFKit.load():
import './assets/pspdfkit.js';
// We need to inform PSPDFKit where to look for its library assets, i.e. the location of the `pspdfkit-lib` directory.const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;
PSPDFKit.load({
baseUrl,
container: '#pspdfkit',
document: 'Document.pdf',
})
.then((instance) => {
console.log('PSPDFKit loaded', instance);
})
.catch((error) => {
console.error(error.message);
});
Import index.js into your HTML page:
<script type="module" src="index.js"></script>
Here’s the full index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 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"
/>
<title>My App</title>
</head>
<body>
<!-- Element where PSPDFKit will be mounted. -->
<div id="pspdfkit" style="width: 100%; height: 100vh"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="module" src="index.js"></script>
</body>
</html>
Serving Your Website
You’ll use the npm serve package as a simple HTTP server.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.
Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Integrating into Your Project
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.
In the index.html file in the root folder of your application, add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.
Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Integrating into Your Project
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.
In the index.html file in the root folder of your application, add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
Import pspdfkit into your application, and initialize PSPDFKit for Web in jQuery by calling PSPDFKit.load():
import './assets/pspdfkit.js';
// We need to inform PSPDFKit where to look for its library assets, i.e. the location of the `pspdfkit-lib` directory.const baseUrl = `${window.location.protocol}//${window.location.host}/assets/`;
PSPDFKit.load({
baseUrl,
container: '#pspdfkit',
document: 'Document.pdf',
})
.then((instance) => {
console.log('PSPDFKit loaded', instance);
})
.catch((error) => {
console.error(error.message);
});
Import index.js into your HTML page:
<script type="module" src="index.js"></script>
Here’s the full index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 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"
/>
<title>My App</title>
</head>
<body>
<!-- Element where PSPDFKit will be mounted. -->
<div id="pspdfkit" style="width: 100%; height: 100vh"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="module" src="index.js"></script>
</body>
</html>
Serving Your Website
You’ll use the npm serve package as a simple HTTP server.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.
Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Integrating into Your Project
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.
Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.
Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Integrating into Your Project
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to your project’s root directory. You can use this demo document as an example.
Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Make sure your /public/assets/ directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
Navigate to the resources/views/welcome.blade.php file.
Add an empty <div> element with a defined height to where PSPDFKit will be mounted:
<div id="pspdfkit" style="height: 100vh"></div>
Include pspdfkit.js on the welcome.blade.php page:
<script src="assets/pspdfkit.js"></script>
Initialize PSPDFKit for Web in Laravel by calling PSPDFKit.load():
<script>
PSPDFKit.load({
container: "#pspdfkit",
document: "document.pdf" // Add the path to your document here.
})
.then(function(instance) {
console.log("PSPDFKit loaded", instance);
})
.catch(function(error) {
console.error(error.message);
});
</script>
Here’s the full welcome.blade.php file (which is just a plain HTML file) :
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module.
Add the PSPDFKit dependency:
yarn add pspdfkit
npm install pspdfkit
Copy the PSPDFKit for Web distribution to the /public/assets/ directory in your project’s folder:
Make sure your /public/assets/ directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
Navigate to the resources/views/welcome.blade.php file.
Add an empty <div> element with a defined height to where PSPDFKit will be mounted:
<div id="pspdfkit" style="height: 100vh"></div>
Include pspdfkit.js on the welcome.blade.php page:
<script src="assets/pspdfkit.js"></script>
Initialize PSPDFKit for Web in Laravel by calling PSPDFKit.load():
<script>
PSPDFKit.load({
container: "#pspdfkit",
document: "document.pdf" // Add the path to your document here.
})
.then(function(instance) {
console.log("PSPDFKit loaded", instance);
})
.catch(function(error) {
console.error(error.message);
});
</script>
Here’s the full welcome.blade.php file (which is just a plain HTML file) :
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Don’t forget to add composer to your path directory:
export PATH="$HOME/.composer/vendor/bin:$PATH"
Creating the Project
Create a new Laravel project:
laravel new pspdfkit-app
Change to the created project directory:
cd pspdfkit-app
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive to your computer.
Create a new directory under public called assets and copy the entire contents of its dist folder to your project’s public/assets folder.
Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
Navigate to the resources/views/welcome.blade.php file.
Add an empty <div> element with a defined height to where PSPDFKit will be mounted:
<div id="pspdfkit" style="height: 100vh"></div>
Include pspdfkit.js on the welcome.blade.php page:
<script src="assets/pspdfkit.js"></script>
Initialize PSPDFKit for Web in Laravel by calling PSPDFKit.load():
<script>
PSPDFKit.load({
container: "#pspdfkit",
document: "document.pdf" // Add the path to your document here.
})
.then(function(instance) {
console.log("PSPDFKit loaded", instance);
})
.catch(function(error) {
console.error(error.message);
});
</script>
Here’s the full welcome.blade.php file (which is just a plain HTML file) :
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit UI.
Adding to Your Project
PSPDFKit for Web library files are distributed as an archive that can be extracted manually.
Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.5.5.tar.gz to your computer.
Once the download is complete, extract the archive to your computer.
Create a new directory under public called assets and copy the entire contents of its dist folder to your project’s public/assets folder.
Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.
Displaying a PDF
Rename the PDF document you want to display in your application to document.pdf, and then add the PDF document to the public directory. You can use this demo document as an example.
Navigate to the resources/views/welcome.blade.php file.
Add an empty <div> element with a defined height to where PSPDFKit will be mounted:
<div id="pspdfkit" style="height: 100vh"></div>
Include pspdfkit.js on the welcome.blade.php page:
<script src="assets/pspdfkit.js"></script>
Initialize PSPDFKit for Web in Laravel by calling PSPDFKit.load():
<script>
PSPDFKit.load({
container: "#pspdfkit",
document: "document.pdf" // Add the path to your document here.
})
.then(function(instance) {
console.log("PSPDFKit loaded", instance);
})
.catch(function(error) {
console.error(error.message);
});
</script>
Here’s the full welcome.blade.php file (which is just a plain HTML file) :
This guide assumes you’ve already configured PSPDFKit for your specific framework. If you haven’t, select your framework from the list above and configure PSPDFKit. Then return to this guide.
Our PWA must be served by a web server over HTTPS, so please make sure your server is configured to serve pages in HTTPS. In development, however, we don’t need HTTPS since browsers treat localhost as a secure origin.
A Note about Progressive Enhancement
By definition, PWAs are progressive, meaning they’re inclusive and they rely heavily on progressive enhancement. When building a PWA, it’s good to always keep this in mind and provide a basic experience for every user of the application.
Richer features should be built on top of an always-working barebones implementation. We highly recommend using feature detection to provide progressive enhancement so that applications won’t break in older browsers that don’t support a specific feature.
Opening a PDF File
To read the PDF, you’ll need a helper to read the selected file from disk using the FileReader API:
function registerFilePicker(element, callback) { ... }
/* ./src/app.js */function registerFilePicker(element, callback) {
function handler(event) {
if (event.target.files.length == 0) {
event.target.value = null;
return;
}
var pdfFile = event.target.files[0];
if (pdfFile.type !== "application/pdf") {
alert("Invalid file type, please load a PDF.");
return;
}
var reader = new FileReader();
reader.addEventListener("load", function(event) {
var pdf = event.target.result;
callback(pdf, pdfFile);
});
reader.addEventListener("error", function(error) {
alert(error.message);
});
reader.readAsArrayBuffer(pdfFile);
event.target.value = null;
}
element.addEventListener("change", handler);
returnfunction() {
element.removeEventListener("change", handler);
};
}
callback is a function that gets the pdf in the ArrayBuffer format so that you can load it directly with PSPDFKit. It also gets the selected File object.
Once you have this helper, you can add the code to initialize PSPDFKit for Web:
./src/app.js
var pspdfkitInstance = null;
var filePicker = document.querySelector('input[type="file"]');
registerFilePicker(filePicker, function(pdf, fileInfo) {
if (pspdfkitInstance) {
PSPDFKit.unload(pspdfkitInstance);
}
PSPDFKit.load({
document: pdf,
container: ".PSPDFKit-container",
// See https://pspdfkit.com/api/web/PSPDFKit.Configuration.html#enableServiceWorkerSupport
enableServiceWorkerSupport: true
}).then(function(instance) {
pspdfkitInstance = instance;
});
});
Our advanced PWA example allows us to load PDF files from a remote server, and it uses IndexedDB to cache them locally for offline use. It also uses the History API to easily load files via URL.
Adding Caching and Offline Capabilities with Service Workers
One of the most important features of PWAs is the ability to load fast and to work on slow network conditions, or even offline. To achieve this, you can use a service worker to cache the application shell and, when available, use the network only to fetch necessary data.
The service worker is a script you register in the application shell. It runs in the background, separate from a webpage. It can intercept and handle network requests, allowing you to cache responses programmatically.
This uses feature detection to determine whether service workers are supported and to register your serviceWorker.js when the feature is available.
You can now start your application and try it out in a web browser. In the Application tab of Chrome Dev Tools, you’ll see that your service worker has been registered and is active!
For local development, it’s a good idea to check the Update on reload option so that the service worker is updated every time the page reloads. You can clear the service worker storage any time from this panel using the Clear storage view.
A Note about the Service Worker API
The Service Worker API is low level, flexible, and powerful. Because of this, it usually requires some boilerplate code to do common tasks like activate the service worker, intercept requests and cache responses, clear the cache, and precache files.
To simplify those tasks, Google developed Workbox, an open source library that abstracts away all the complexity and makes building PWAs easy. Before deploying to production, we recommend using Workbox to manage your service workers.
Workbox can help with doing more than precaching, and it allows you to configure how each resource should be cached and how routes should be handled.
Complex applications will likely need to use the network to fetch data before they can render content in the app shell. In those cases, it’s important to choose the correct caching strategy for your data.
Please refer to the Workbox website to learn more about how to handle advanced use cases.
Final Touches
Now that your app has offline capabilities, you only need to add a web app manifest to make the application recognizable by the web browser and to describe how the app should behave when installed on users’ devices.
The web app manifest is a file whose name is manifest.json. It contains metadata like the name of the app, the paths to icons and their sizes, the start URL, and the theme color. Now you’ll create a basic one for your PWA:
Finally, you need to register the manifest in the app pages — in your case, index.html:
<!-- ./src/index.html -->
<title>PSPDFKit PWA</title>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('./serviceWorker.js')
})
}
</script>
+<link rel="manifest" href="./manifest.json">
You can verify the manifest in the Application tab of Chrome Dev Tools:
The web app manifest also makes it possible to display an App Install Banner or an Add to Home Screen dialog. You can follow the guidelines from Google to learn how to create and display one.
Limitations
Disk Quota
Web browsers define quotas either per origin (Chrome and Opera) or per API (e.g. IndexedDB, service workers). When storing files via web APIs, it’s a good idea to keep this in mind and ideally monitor the disk quota status to avoid failures. Apps can check how much quota they’re using with the Quota Management API. We highly recommend you check out this research report on browser storage from HTML5 Rocks.
Precached PSPDFKit Assets
In this guide, you saw how to precache all the PSPDFKit for Web assets, including the JavaScript fallback pspdfkit.asm.js. However, when the target browser supports WebAssembly, it’d be better to exclude this file from the precache manifest and vice versa: When the target browser doesn’t support WebAssembly, you shouldn’t precache the WASM module pspdfkit.wasm. For production applications, we recommend generating separate manifests and service workers and serving them conditionally.
Conclusion
Hopefully the above information demonstrated how easy it is to integrate PSPDFKit for Web and make a simple PWA to display PDF documents. This is possible thanks to Workbox, which provides a simple yet powerful abstraction on top of the Service Worker API.
The PWA built in this guide meets all the requirements of a baseline PWA, however, it’s just a proof of concept that shouldn’t be used in production.
We also built a more comprehensive and advanced example where PDF documents can be fetched from a remote server and are stored locally in IndexedDB for offline use. The advanced example also uses the History API to provide a unique working URL for every PDF document, along with a connectivity status indicator.
If you want to learn more about progressive web apps, we highly encourage you to check out the following resources:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into SharePoint Online pages using a web part. By the end of this guide, you’ll be able to use a web browser to directly open PDF documents stored in SharePoint, as well as display, edit, and save them back to SharePoint.
PSPDFKit for SharePoint is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.
PSPDFKit for SharePoint shares the same APIs as PSPDFKit for Web Standalone, so please use the Web documentation when customizing your SharePoint application.
To make the SharePoint catalog available, click Show All… in the side navigation, and find Admin centers > SharePoint. This will direct you to SharePoint Admin portal.
Follow along with this tutorial from Microsoft to configure your SharePoint tenant and create your new team site.
To configure your URL, go to the config/serve.json file in your pspdfkit-sp-online-webpart project and change enter-your-SharePoint-site to the URL of your SharePoint site:
Don’t forget to execute gulp trust-dev-cert from the root of your project to trust the self-signed developer certificate.
Change your directory into the pspdfkit-sp-online-webpart directory:
cd pspdfkit-sp-online-webpart
Open the project in your preferred code editor and check which version of Node.js you’re using:
node --version
Make sure you have Node.js version 14.17.6 installed. If you’re using a different version of Node, switch to Node.js version 14.17.6 via nvm (node version manager) or asdf.
💡 Tip: If you’re using asdf, you can switch the Node version locally for this project. First, install Node.js 14.17.6 using the following command:
asdf install nodejs 14.17.6
Now, run asdf local nodejs 14.17.6 to switch to the Node.js version you just installed. This will create a .tool-versions file in the root of your project with Node version 14.17.6. If you encounter any issues, check out the asdf documentation.
💡 Tip: If you’re using nvm, you can switch to Node.js 14.17.6 by typing the following command:
nvm use 14.17.6
Install the dependencies:
npm install
To serve the project, type:
npm run serve
The browser will open a new tab with your SharePoint account.
Integrating PSPDFKit into SharePoint
PSPDFKit can be added to your project as a widget. You can add it to your project using the UI elements.
Refer to the following video for information on how to integrate the PSPDFKit widget into your project, or continue with the instructions.
On your Home page, in the upper right-hand corner, find the Edit button.
Click the Edit button. This will open the Editing interface.
To add the PSPDFKit widget, hover over where you want to place it. This will display a plus icon. When you click the plus icon, it’ll open a dialog box with the possible web parts you can incorporate into your project.
Search for the PSPDFKit widget and click on it.
Find the edit button with the pencil icon, and click Select Document from the open panel.
Choose your document and click Open. Now you’ll be able to see the PSPDFKit widget in your project like in the video above.
Using for Production
For production, you need to follow these steps to deploy into your SharePoint environment.
Run npm run bundle and then npm run package.
Then, follow the steps outlined in this SharePoint guide for packaging and deploying your web part. If a previous installation already exists, it’s recommended to remove it before proceeding.
Please make sure to select Make this solution available to all sites in the organization. This appears in the confirmation dialog you’ll see after dragging the package.
To make the web part available in Microsoft Teams, synchronize your solution with Teams.
Navigate to the workbench of one of your SharePoint sites and add the PSPDFKit web part there.
There’s an issue getting SharePoint to bundle the static assets of PSPDFKit for Web under the correct subdirectory when using the SharePoint file system itself as your CDN instead of a custom one (you can specify a custom URL for the static assets under write-manifests.json), so you might see a network error when requesting one of the chunks for the PSPDFKit library.
If this happens, it’s because the pspdfkit-lib subdirectory hasn’t been created by SharePoint. To fix this, navigate to the erroring URL but trim its path before the pspdfkit-lib segment (i.e. https://<your-sharepoint-site>/sites/appcatalog/ClientSideAssets/<some-hash>) and create a pspdfkit-lib folder.
Then, you can copy the contents from ./sharepoint/solution/debug/ClientSideAssets/pspdfkit-lib to the newly created folder.
Make sure you have the latest version of PSPDFKit inside the pspdfkit-lib folder.
ℹ️ Note: As an alternative to this step, consider hosting the assets in a CDN and set it in the write-manifests.json file.
Your PSPDFKit instance should now work. Try opening your workbench and check if the PSPDFKit web part appears as part of the list of available web parts to add.
You can now begin customizing the user interface, implementing custom functionality, or adding a custom file handler for PDF files.
Integrate into SharePoint Online as a File Handler
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into SharePoint Online as a file handler.
File handlers instruct SharePoint to redirect to your URL of choice whenever a file with a particular extension is clicked. By using a file handler, you’ll override SharePoint’s default behavior so that PDF documents are opened directly inside your application. Any edits to the opened files using your application can then be directly saved back to SharePoint.
PSPDFKit for SharePoint is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.
PSPDFKit for SharePoint shares the same APIs as PSPDFKit for Web Standalone, so please use the Web documentation when customizing your SharePoint application.
File handlers are registered centrally for the entire SharePoint tenant and cannot be selectively enabled or disabled. Uninstalling a file handler from the environment can be problematic due to aggressive caching and may take 24–48 hours to take effect.
Alternatively, you can download the project as a .zip file without cloning the project.
This project uses Next.js as a server-side framework; however, you can use any other server-side framework you like. The application serves as a native file handler of PDF documents for SharePoint sites.
Concretely, this server handles requests to open PDF documents from a SharePoint site and then proceeds to render an HTML page containing the PSPDFKit for Web Standalone viewer.
After cloning the repository, and before starting the development setup process, it’s worth understanding how the file handler architecture works.
Setup Application is a special helper application that needs to be registered in the Azure App Directory. However, it doesn’t represent the file handler app, rather it’s a helper to automate the process of creating the file handler. This helper app can later safely be removed from the environment.
Customizing the Manifest Specification
The file handler server is a regular server-side web application that handles requests initiated by SharePoint when users click files from the SharePoint Document Library.
The main important part around the file handler is the manifest file, which defines the URL that will handle the requests, how authentication will be handled, and what elements will be rendered in the SharePoint UI (e.g. the context menu item).
In this project, the final manifest is generated by a set of TypeScript scripts under the ./tools/local-setup directory. The entry point is ./tools/local-setup/bin/localsetup.ts. The result of this series of scripts is the automatic generation of the final file handler application registration in your Azure Active Directory.
There are certain key aspects that you can customize as part of the manifest (outlined below).
Display name of the menu — To change the string used when a file is selected, go to ./tools/local-setup/tasks/ensure-app.ts and change the value for the appDisplayName variable.
Login URL — To change the URL SharePoint uses to handle logging in, go to ./tools/local-setup/tasks/ensure-app.ts and change the value for redirectUris.
Logout URL — To change the URL SharePoint uses to handle logging out, go to ./tools/local-setup/tasks/ensure-app.ts and change the value for logoutUrls.
URL to edit a selected file — To change the URL SharePoint uses to handle redirection after a file is opened, go to tools/local-setup/tasks/inject-manifest.ts and change the value for the "url" field as part of the actions array (line 9). Notice how the file extension your file handler will operate on — in addition to other metadata — is also defined here.
Once these aspects are defined, you can proceed with the development environment preparation for the file handler.
Notice that, by default, you’re defining localhost:3000. This means SharePoint will, for the time being, always use that URL when selecting a file, which means you need to have your local development server running.
Later, there are instructions on how to change that server once a production deployment exists.
Development Setup
Change your directory into the pspdfkit-sp-online-filehandler directory:
cd pspdfkit-sp-online-filehandler
Open the project in your preferred code editor and check which version of Node.js you’re using:
node --version
Make sure you have Node.js version 14.17.6 installed. If you’re using a different version of Node, switch to Node.js version 14.17.6 via nvm (node version manager) or asdf.
💡 Tip: If you’re using asdf, you can switch the Node version locally for this project. First, install Node.js 14.17.6 using the following command:
asdf install nodejs 14.17.6
Now, run asdf local nodejs 14.17.6 to switch to the Node.js version you just installed. This will create a .tool-versions file in the root of your project with Node version 14.17.6. If you encounter any issues, check out the asdf documentation.
💡 Tip: If you’re using nvm, you can switch to Node.js 14.17.6 by typing the following command:
nvm use 14.17.6
Install the dependencies:
npm install
You need to set up a file handler app registration and load it with a manifest. To do this, you need to be an admin of a SharePoint tenant.
The app you're manually creating is used as a way of automating the registration of the actual file handler, but it isn’t the file handler itself. At a later point, you’ll no longer need this temporal app, and you can remove it from your Azure Active Directory.
Switch to the tenant in which you want to register the application (if you have more than one).
Select Azure Active Directory.
Under Manage, select App registrations > New registration.
Give it an easy-to-find name (e.g. “filehandler localdev setup”).
Add API permissions:
Microsoft Graph > Delegated permissions: openid, Directory.AccessAsUser.All.
Grant admin consent to the permissions.
Under the Authentication section:
Add a platform:
Add mobile and desktop applications.
Under Redirect URIs, select the MSAL only option.
Set Allow public client flows to Yes. This will treat the app as a public client. Please make sure this step isn’t skipped, as otherwise, the whole process will later fail when running your dev-setup script.
Copy the Application (client) ID and the Directory (tenant) ID, which you’ll need in the next step.
Make sure OpenSSL is installed on your system. Then, run npm run dev-setup, and supply the client and tenant IDs from the previous step when prompted. Follow the onscreen prompts to complete the device code authorization flow.
Once setup is complete, you can optionally delete the registration helper application or leave it in place for future use.
Running the dev-setup command in step 4 generates an .env.local file in the root of this project. Review the values and ensure it was created correctly. It’ll appear similar to what’s shown below:
IRON_SESSION_PASSWORD='{anything you want}'
NODE_ENV='production'
AAD_MSAL_AUTH_TENANT_ID="{app tenant id from step 3.9}"
AAD_MSAL_AUTH_ID="{app client id from step 3.9}"
AAD_MSAL_AUTH_SECRET="{app secret from step 3.9}"
NEXT_PUBLIC_FILEHANDLER_SITE_HOST_URL="https://localhost:3000"
Run npm run dev and launch the file handler from within OneDrive or the SharePoint document library on a .pdf file.
Production Deployment
Follow these steps when you want to upload the file handler into a production server after development.
Go to the Azure Active Directory. Then, follow the App registrations link in the sidebar.
Select your existing application (created from step 3 of the development setup).
Select Manifest from the sidebar, as shown in the screenshot below.
Once in the manifest editor, search for the logoutUrl property and replace its value with the same path, but pointing to your production domain instead (the one your application was deployed to in step 2).
Search for the replyUrlsWithType array, and for objects with the url key, replace it to also point to your domain (but maintaining the path).
Click Save. Now the file handler is ready to be used in production.
Go to the SharePoint document library and try to open a PDF file. The file will be opened using the PSPDFKit viewer.
Integrate into SharePoint On-Premises as a File Handler
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into SharePoint on-premises environments as a file handler.
File handlers are simple XML files that instruct SharePoint to redirect to your URL of choice whenever a file with a particular extension is clicked. By using a file handler, you’ll override SharePoint’s default behavior so that PDF documents stored in SharePoint are opened directly inside your application. Any edits to the opened files using your application can then be directly saved back to SharePoint.
PSPDFKit for SharePoint is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.
PSPDFKit for SharePoint shares the same APIs as PSPDFKit for Web Standalone, so please use the Web documentation when customizing your SharePoint application.
Requirements
Hardware and operating system requirements are determined by the requirements of the SharePoint version you’re targeting, as well as the requirements of the Visual Studio version used for development. Both SharePoint Server and Visual Studio have to be installed on the developer machine.
The required Visual Studio versions for targeting different SharePoint versions are summarized in the following table. Up to Visual Studio 2017, the matching Microsoft Office Developer Tools needs to be manually downloaded and installed. For Visual Studio 2019 and 2022, the relevant components can be selected during installation of Visual Studio.
SharePoint Permissions Considerations
To develop SharePoint solutions, you must have sufficient permissions to run and debug them. Before you can test a SharePoint solution, take the following steps to ensure you have the necessary permissions:
Add your user account as an Administrator on the system.
Add your user account as a Farm Administrator for the SharePoint server.
In SharePoint Central Administration, click the Manage the farm administrators group link.
On the Farm Administrators page, click the New button.
Add your user account to the WSS_ADMIN_WPG group.
You can find more information by clicking the link that corresponds to your version of Visual Studio:
A new project has to be created in Visual Studio. The project can then be deployed to and debugged in your selected SharePoint environment. The project can also be published to create an installable SharePoint solution package (.wsp).
The example here uses Visual Studio 2019, but SharePoint project templates are also available in earlier versions (minimum Visual Studio 2013).
Create a new empty SharePoint project matching the desired SharePoint version (SharePoint 2013, SharePoint 2016, or SharePoint 2019).
Give your project the name OpenPDFSharePoint, set its location on your disk, select the desired .NET Framework version, and click Create.
Select your development SharePoint site for debugging, and pick Deploy as farm solution. Click Finish. This will create the skeleton of your project.
Creating the Folder Structure
Some folders in your project have to be created or mapped to SharePoint folders in advance.
In the Solution Explorer window, right-click the OpenPDFSharePoint project and select Add > SharePoint “Layouts” Mapped Folder. This will create the Layouts folder and a folder for your code (OpenPDFSharePoint) inside. It also automatically updates the package details.
Right-click the OpenPDFSharePoint project in the Solution Explorer window again and select Add > SharePoint Mapped Folder. Select {SharePointRoot} > TEMPLATE > XML from the tree structure in the popup dialogue and click OK.
Using the context menu again (right-click on the newly created OpenPDFSharePoint folder inside the Layouts folder), select Add > New Folder. Create the following nested subfolders inside the OpenPDFSharePoint folder: assets > modern > pspdfkit-lib.
Adding the PSPDFKit Libraries to the Project
The content (the .wasm file and the JavaScript, CSS, and font files) mentioned in this next part is the PSPDFKit Web Standalone product. It enables the browser to render and edit PDF files.
The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.2.2.tar.gz to your computer.
Once the download is complete, extract the archive.
Right-click on the Layouts > OpenPDFSharePoint > assets > modern folder in the Solution Explorer window and select Add > Existing Item…
Navigate to the extracted package > dist > modern > pspdfkit.js file, select it, and click Add.
Now, right-click on the Layouts > OpenPDFSharePoint > assets > modern > pspdfkit-lib folder in the Solution Explorer window and select Add > Existing Item… again.
Navigate to the extracted package > dist > modern > pspdfkit-lib folder, select all the files in the folder, and click Add. The result will look like this:
Adding a PDF Viewer Page
This SharePoint application page will encapsulate the PSPDFKit Web Standalone component and configure it to display the selected PDF file. It’ll also save the changes back into the SharePoint library.
Right-click the OpenPDFSharePoint folder inside the Layouts folder in the Solution Explorer window and select Add > New Item.
Select Application Page (Farm Solution only) and name it ViewPDF.aspx. Click Add.
In the ViewPDF.aspx file, identify the the main content placeholder:
<script type="text/javascript">
// !!! Enter your license key here !!!let licenseKey = "paste your license here";
// Load PDF Editor
PSPDFKit.load({
container: "#pspdfkit",
document: "<%= fileURL %>",
licenseKey: licenseKey
})
.then(function (instance) {
console.log("PSPDFKit loaded", instance);
})
.catch(function (error) {
console.error(error.message);
});
</script>
If you have a PSPDFKit license, then paste it into the script (at the beginning) between the quotation marks. Otherwise, let the licenseKey variable be an empty string.
You must explicitly set the type attribute of the script elements to `"text/javascript"`. Otherwise, they’ll be ignored.
Modify the ViewPDF.aspx.cs code behind the file to include the fileURL public property and some new code in the Page_load event:
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System;
namespace OpenPDFSharePoint.Layouts.OpenPDFSharePoint
{
publicpartialclass ViewPDF : LayoutsPageBase
{
/// <summary>/// Gets the file URL extracted from the URL key./// </summary>publicstring fileURL { get; privateset; }
/// <summary>/// Page load event./// </summary>protectedvoid Page_Load(object sender, EventArgs e)
{
// Extract the file URL for the SharePoint file.
fileURL = Request.QueryString["fileURL"];
}
}
}
Adding a File Handler
A SharePoint file handler can be used to link PDF files to the PSPDFKit PDF editor. The file handlers are simple XML files at a specific location. They instruct SharePoint to redirect to your URL of choice whenever a file with a particular extension is clicked.
Add an .xml file named serverfilesPSPDFKit.xml to the XML folder in the solution with the following content:
<?xml version="1.0" encoding="utf-8" ?>
<ServerFiles>
<!-- Redirect any links to a PDF file to the PDF Editor application page -->
<Mapping FileExtension="pdf" RedirectUrlTemplate="/_layouts/15/OpenPDFSharePoint/ViewPDF.aspx?fileURL=|0" NoGetRedirect="TRUE"/>
</ServerFiles>
Enabling the WASM MIME Type
Before the above example can be used, verify that .wasm files are served by your SharePoint web server.
Start the Internet Information Services (IIS) Manager. Navigate to the website that belongs to your SharePoint instance. Double-click MIME Types in the Features View.
If .wasm isn’t in the list of extensions, click the Add button in the Actions pane. In the Add MIME Type popup window, enter ".wasm" (under File name extension:) and "application/wasm" (under MIME type:).
Publishing the Solution
Visual Studio allows you to deploy your solution to the SharePoint instance you selected at the beginning for debugging purposes. Select Build > Deploy Solution.
It’s also possible to publish a deployable package (.wsp) by selecting Build > Publish… Pick Publish to File System, specifying your desired location, and clicking Publish.
Installing the Solution
Open the SharePoint Management Shell with Run as administrator. Assuming you have the .wsp file in the c:\deploy folder, copy and execute the following command:
Integrate into SharePoint On-Premises as a File Handler
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into SharePoint on-premises environments as a file handler.
File handlers are simple XML files that instruct SharePoint to redirect to your URL of choice whenever a file with a particular extension is clicked. By using a file handler, you’ll override SharePoint’s default behavior so that PDF documents stored in SharePoint are opened directly inside your application. Any edits to the opened files using your application can then be directly saved back to SharePoint.
PSPDFKit for SharePoint is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.
PSPDFKit for SharePoint shares the same APIs as PSPDFKit for Web Standalone, so please use the Web documentation when customizing your SharePoint application.
Requirements
Hardware and operating system requirements are determined by the requirements of the SharePoint version you’re targeting, as well as the requirements of the Visual Studio version used for development. Both SharePoint Server and Visual Studio have to be installed on the developer machine.
The required Visual Studio versions for targeting different SharePoint versions are summarized in the following table. Up to Visual Studio 2017, the matching Microsoft Office Developer Tools needs to be manually downloaded and installed. For Visual Studio 2019 and 2022, the relevant components can be selected during installation of Visual Studio.
SharePoint Permissions Considerations
To develop SharePoint solutions, you must have sufficient permissions to run and debug them. Before you can test a SharePoint solution, take the following steps to ensure you have the necessary permissions:
Add your user account as an Administrator on the system.
Add your user account as a Farm Administrator for the SharePoint server.
In SharePoint Central Administration, click the Manage the farm administrators group link.
On the Farm Administrators page, click the New button.
Add your user account to the WSS_ADMIN_WPG group.
You can find more information by clicking the link that corresponds to your version of Visual Studio:
The content (the .wasm file and the JavaScript, CSS, and font files) mentioned in this next part is the PSPDFKit Web Standalone product. It enables the browser to render and edit PDF files.
The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.2.2.tar.gz to your computer.
Once the download is complete, extract the archive.
Right-click on the Layouts > OpenPDFSharePoint > assets > modern folder in the Solution Explorer window and select Add > Existing Item…
Navigate to the extracted package > dist > modern > pspdfkit.js file, select it, and click Add.
Now, right-click on the Layouts > OpenPDFSharePoint > assets > modern > pspdfkit-lib folder in the Solution Explorer window and select Add > Existing Item… again.
Navigate to the extracted package > dist > modern > pspdfkit-lib folder, select all the files in the folder, and click Add. The result will look like this:
Adding a PDF Viewer Page
This SharePoint application page will encapsulate the PSPDFKit Web Standalone component and configure it to display the selected PDF file. It’ll also save the changes back into the SharePoint library.
Right-click the OpenPDFSharePoint folder inside the Layouts folder in the Solution Explorer window and select Add > New Item.
Select Application Page (Farm Solution only) and name it ViewPDF.aspx. Click Add.
In the ViewPDF.aspx file, identify the the main content placeholder:
<script type="text/javascript">
// !!! Enter your license key here !!!let licenseKey = "paste your license here";
// Load PDF Editor
PSPDFKit.load({
container: "#pspdfkit",
document: "<%= fileURL %>",
licenseKey: licenseKey
})
.then(function (instance) {
console.log("PSPDFKit loaded", instance);
})
.catch(function (error) {
console.error(error.message);
});
</script>
If you have a PSPDFKit license, then paste it into the script (at the beginning) between the quotation marks. Otherwise, let the licenseKey variable be an empty string.
You must explicitly set the type attribute of the script elements to `"text/javascript"`. Otherwise, they’ll be ignored.
Modify the ViewPDF.aspx.cs code behind the file to include the fileURL public property and some new code in the Page_load event:
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System;
namespace OpenPDFSharePoint.Layouts.OpenPDFSharePoint
{
publicpartialclass ViewPDF : LayoutsPageBase
{
/// <summary>/// Gets the file URL extracted from the URL key./// </summary>publicstring fileURL { get; privateset; }
/// <summary>/// Page load event./// </summary>protectedvoid Page_Load(object sender, EventArgs e)
{
// Extract the file URL for the SharePoint file.
fileURL = Request.QueryString["fileURL"];
}
}
}
Adding a File Handler
A SharePoint file handler can be used to link PDF files to the PSPDFKit PDF editor. The file handlers are simple XML files at a specific location. They instruct SharePoint to redirect to your URL of choice whenever a file with a particular extension is clicked.
Add an .xml file named serverfilesPSPDFKit.xml to the XML folder in the solution with the following content:
<?xml version="1.0" encoding="utf-8" ?>
<ServerFiles>
<!-- Redirect any links to a PDF file to the PDF Editor application page -->
<Mapping FileExtension="pdf" RedirectUrlTemplate="/_layouts/15/OpenPDFSharePoint/ViewPDF.aspx?fileURL=|0" NoGetRedirect="TRUE"/>
</ServerFiles>
Enabling the WASM MIME Type
Before the above example can be used, verify that .wasm files are served by your SharePoint web server.
Start the Internet Information Services (IIS) Manager. Navigate to the website that belongs to your SharePoint instance. Double-click MIME Types in the Features View.
If .wasm isn’t in the list of extensions, click the Add button in the Actions pane. In the Add MIME Type popup window, enter ".wasm" (under File name extension:) and "application/wasm" (under MIME type:).
Publishing the Solution
Visual Studio allows you to deploy your solution to the SharePoint instance you selected at the beginning for debugging purposes. Select Build > Deploy Solution.
It’s also possible to publish a deployable package (.wsp) by selecting Build > Publish… Pick Publish to File System, specifying your desired location, and clicking Publish.
Installing the Solution
Open the SharePoint Management Shell with Run as administrator. Assuming you have the .wsp file in the c:\deploy folder, copy and execute the following command:
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into Microsoft Teams as a tab app. By the end of this guide, you’ll be able to use a web browser to directly open PDF documents in a Teams tab, as well as display, edit, and save them back to Teams.
PSPDFKit for Teams is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.
PSPDFKit for Teams shares the same APIs as PSPDFKit for Web Standalone, so please use the Web documentation when customizing your Teams application.
Starting with SharePoint v1.8, Microsoft made it possible to build tab apps using a SharePoint Online web part.
Once you’ve completed the steps in the guide and the SharePoint web part has been created, add TeamsTab to the supportedHosts property of the web part manifest to use it as a tab in a channel. You’ll find the manifest file under the ./src/webparts/**/**.manifest.json file:
The PSPDFKit web part will now appear as a tab app that you can add to a Microsoft Teams channel.
Once the PSPDFKit tab app has been added to a channel, click the PSPDFKit tab and select the Settings option. Then click Select Document to choose a PDF file to open.
You can now begin customizing the user interface or implementing custom functionality.
This guide will walk you through the steps necessary to integrate PSPDFKit for Web into Microsoft OneDrive as a file handler. File handlers instruct OneDrive to redirect to your URL of choice whenever a file with a particular extension is clicked. By using a file handler, you’ll override OneDrive’s default behavior so that PDF documents are opened directly inside your application. Any edits to the opened files using your application can then be directly saved back to OneDrive.
PSPDFKit for OneDrive is a wrapper on top of PSPDFKit for Web Standalone, which is a client-side JavaScript library for viewing and editing PDF documents directly in a web browser.
PSPDFKit for OneDrive shares the same APIs as PSPDFKit for Web Standalone, so please use the Web documentation when customizing your OneDrive application.
SharePoint Online and OneDrive share the same file handler manifest, which means that implementing the file handler for OneDrive will automatically also implement it for SharePoint. It isn’t possible to selectively implement it for only one of these services. Therefore, to implement the OneDrive file handler, please follow the instructions for implementing the SharePoint Online file handler.
After the SharePoint Online file handler has been deployed, PDF documents in the OneDrive document library will open by default in your PDF editor, where they can be edited and saved.
You can now begin customizing the user interface or implementing custom functionality.
Integrate into Salesforce as a Lightning Web Component
PSPDFKit for Salesforce enables you to open PDF, JPG, PNG, and TIFF files inside Salesforce. This unlocks the full functionality of PSPDFKit in Salesforce, including PDF generation, redaction, and signatures.
This guide explains how to integrate PSPDFKit into Salesforce. The integration works as a Lightning web component (LWC) that you can add to any Salesforce organization.
Requirements
Before continuing with this guide, perform all of the following actions:
In the browser window that opens, log in to your Salesforce organization and authorize the Salesforce CLI.
In the terminal, run the following command from the PSPDFKit for Salesforce project’s root folder:
sfdx force:source:deploy -x manifest/package.xml
Enabling Users to Use PSPDFKit
To enable users of your Salesforce organization to use PSPDFKit, follow these steps.
In Salesforce, go to Users > Permission Sets.
Find PSPDFKit Admin Access in the list and click it.
Click Manage Assignments.
Click Add Assignment.
Select the users you want to authorize to use PSPDFKit.
Click Next, and then click Assign.
Changing the Security Settings
PSPDFKit for Salesforce requires Lightning Locker to protect Lightning web components, but Salesforce uses Lightning Web Security by default. To change the default security settings, follow these steps.
In Salesforce, go to Security > Session Settings.
Deselect Use Lightning Web Security for Lightning web components.
Scroll down and click Save.
Using the PSPDFKit for Salesforce Integration
To use PSPDFKit in your Salesforce organization, follow these steps.
Ensure you’re logged in as a user authorized to use PSPDFKit.
In the top-right corner, open the App Launcher.
Search for and select PSPDFKit.
Click browse to upload local PDF files, or open a file from Salesforce.
Integrate into Salesforce as a Lightning Web Component
PSPDFKit for Salesforce enables you to open PDF, JPG, PNG, and TIFF files inside Salesforce. This unlocks the full functionality of PSPDFKit in Salesforce, including PDF generation, redaction, and signatures.
This guide explains how to integrate PSPDFKit into Salesforce. The integration works as a Lightning web component (LWC) that you can add to any Salesforce organization.
Requirements
Before continuing with this guide, perform all of the following actions:
It’s recommended that you add the file selector to your project. To do so, copy the files and folders from the force-app/main/default folder of the PSPDFKit for Salesforce project to the same folder of your Salesforce application. This enables you to open files from Salesforce and save them back, both using the built-in user interface (UI) and programmatically. If you don’t complete this step, you can only load files programmatically from an external URL, and you cannot save them to Salesforce.
Deploying the Package
To deploy the package to your Salesforce organization, follow these steps.
Run the following command in the terminal to start the Salesforce authentication process:
In the browser window that opens, log in to your Salesforce organization and authorize the Salesforce CLI.
In the terminal, run the following command from the PSPDFKit for Salesforce project’s root folder:
sfdx force:source:deploy -x manifest/package.xml
Enabling Users to Use PSPDFKit
To enable users of your Salesforce organization to use PSPDFKit, follow these steps.
In Salesforce, go to Users > Permission Sets.
Find PSPDFKit Admin Access in the list and click it.
Click Manage Assignments.
Click Add Assignment.
Select the users you want to authorize to use PSPDFKit.
Click Next, and then click Assign.
Changing the Security Settings
PSPDFKit for Salesforce requires Lightning Locker to protect Lightning web components, but Salesforce uses Lightning Web Security by default. To change the default security settings, follow these steps.
In Salesforce, go to Security > Session Settings.
Deselect Use Lightning Web Security for Lightning web components.
Scroll down and click Save.
Using the PSPDFKit for Salesforce Integration
To use PSPDFKit in your Salesforce organization, follow these steps.
Ensure you’re logged in as a user authorized to use PSPDFKit.
In the top-right corner, open the App Launcher.
Search for and select PSPDFKit.
Click browse to upload local PDF files, or open a file from Salesforce.
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load(). Don’t forget to replace psd_live_<rest_of_your_access_token> with your document’s access token:
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
A package manager compatible with npm. This guide contains usage examples for Yarn and the npm client. The npm client is installed with Node.js by default.
You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.
Import pspdfkit into your application and initialize PSPDFKit for Web in a file named index.js by calling PSPDFKit.load(). Don’t forget to replace psd_live_<rest_of_your_access_token> with your document’s access token:
<!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>
<!-- Element where PSPDFKit will be mounted. -->
<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
<script type="module" src="index.js"></script>
</body>
</html>
Serving Your Website
You’ll use the npm serve package as a simple HTTP server.
Install the serve package:
yarn global add serve
npm install --global serve
Serve the contents of the current directory:
serve -l 8080 .
Navigate to http://localhost:8080 to view the website.
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
Pick a document to upload by clicking the Browse Files button.
Wait for the upload to complete.
Note the Copy Token button; you can use it to copy the document’s access token to the clipboard so you can paste it into the code below.
The access token should start with psd_live_, followed by random characters.
Displaying a PDF
Replace the contents of app.component.html with:
<div class="app">
<!-- We'll mount the PSPDFKit UI to this element. -->
<div id="pspdfkit-container" style="width: 100%; height: 100vh"></div>
</div>
Replace the contents of app.component.ts with:
import { Component } from "@angular/core";
import PSPDFKit from "pspdfkit";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["app.component.css"]
})
exportclass AppComponent {
title = "PSPDFKit Cloud Angular Example";
ngAfterViewInit() {
PSPDFKit.load({
container: "#pspdfkit-container",
authPayload: { accessToken: "psd_live_<rest_of_your_access_token>" },
instant: true
} asany).then(instance => {
// For the sake of this demo, store the PSPDFKit for Web instance// on the global object so that you can open the dev tools and// play with the PSPDFKit API.
(window asany).instance = instance;
});
}
}
Don’t forget to replace psd_live_<rest_of_your_access_token> with your document’s access token.
Start the app and open it in your default browser:
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
Initialize PSPDFKit in the PDF viewer component. Don’t forget to replace psd_live_<rest_of_your_access_token> with your document’s access token:
import { Component, OnInit } from '@angular/core';
import PSPDFKit from 'pspdfkit';
@Component({
selector: 'pdf-viewer',
templateUrl: './pdf-viewer.component.html',
styleUrls: ['./pdf-viewer.component.css']
})
exportclass PdfViewerComponent implements OnInit {
ngOnInit(): void {
PSPDFKit.load({
container: "#pspdfkit-container",
authPayload: { accessToken: "psd_live_<rest_of_your_access_token>" },
instant: true
} asany).then(instance => {
// For the sake of this demo, store the PSPDFKit for Web instance// on the global object so that you can open the dev tools and// play with the PSPDFKit API.
(window asany).instance = instance;
});
}
}
Add the new viewer component. Here, we add it to the main application component:
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
Pick a document to upload by clicking the Browse Files button.
Wait for the upload to complete.
Note the Copy Token button; you can use it to copy the document’s access token to the clipboard so you can paste it into the code below.
The access token should start with psd_live_, followed by random characters.
Displaying a PDF
Add a component wrapper for the PSPDFKit library and save it as src/components/PSPDFKitContainer.vue:
<template>
<div class="pdf-container"></div>
</template>
<script>
import PSPDFKit from "pspdfkit";
/**
* PSPDFKit for Web example component.
*/exportdefault {
name: 'PSPDFKit',
/**
* The component receives `pdfFile` as a prop, which is type of `String` and is required.
*/
props: {
accessToken: {
type: String,
required: true,
},
},
/**
* We wait until the template has been rendered to load the document into the library.
*/
mounted() {
this.loadPSPDFKit().then((instance) => {
this.$emit("loaded", instance);
});
},
/**
* We watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
*/
watch: {
accessToken(val) {
if (val) {
this.loadPSPDFKit();
}
},
},
/**
* Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
*/
methods: {
async loadPSPDFKit() {
PSPDFKit.unload(".pdf-container");
return PSPDFKit.load({
// Container where PSPDFKit should be mounted.
container: ".pdf-container",
// The access token to use.
authPayload: { accessToken: this.accessToken },
// Enable Instant collaboration.
instant: true,
});
},
},
/**
* Clean up when the component is unmounted so it's ready to load another document (not needed in this example).
*/
beforeUnmount() {
PSPDFKit.unload(".pdf-container");
},
};
</script>
<style scoped>
.pdf-container {
height: 100vh;
}
</style>
Include the newly created component in src/App.vue. Don’t forget to replace psd_live_<rest_of_your_access_token> with your document’s access token:
<template>
<div id="app">
<PSPDFKitContainer accessToken="psd_live_<rest_of_your_access_token>" @loaded="handleLoaded" />
</div>
</template>
<script>
import PSPDFKitContainer from "@/components/PSPDFKitContainer";
exportdefault {
/**
* Render the `PSPDFKitContainer` component.
*/
components: {
PSPDFKitContainer,
},
/**
* Our component has a method to get notified about the document being loaded.
*/
methods: {
handleLoaded(instance) {
console.log("PSPDFKit has loaded: ", instance);
// Do something.
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
}
body {
margin: 0;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
border-radius: 4px;
display: inline-block;
padding: 6px12px;
cursor: pointer;
background:#4A8FED;
padding:10px;
color:#fff;
font:inherit;
font-size: 16px;
font-weight: bold;
}
</style>
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
Pick a document to upload by clicking the Browse Files button.
Wait for the upload to complete.
Note the Copy Token button; you can use it to copy the document’s access token to the clipboard so you can paste it into the code below.
The access token should start with psd_live_, followed by random characters.
Displaying a PDF
Add a component wrapper for the PSPDFKit library and save it as src/components/PSPDFKitContainer.vue:
<template>
<div class="pdf-container"></div>
</template>
<script>
import PSPDFKit from "pspdfkit";
/**
* PSPDFKit for Web example component.
*/exportdefault {
name: 'PSPDFKit',
/**
* The component receives `pdfFile` as a prop, which is type of `String` and is required.
*/
props: {
accessToken: {
type: String,
required: true,
},
},
/**
* We wait until the template has been rendered to load the document into the library.
*/
mounted() {
this.loadPSPDFKit().then((instance) => {
this.$emit("loaded", instance);
});
},
/**
* We watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
*/
watch: {
accessToken(val) {
if (val) {
this.loadPSPDFKit();
}
},
},
/**
* Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
*/
methods: {
async loadPSPDFKit() {
PSPDFKit.unload(".pdf-container");
return PSPDFKit.load({
// Container where PSPDFKit should be mounted.
container: ".pdf-container",
// The access token to use.
authPayload: { accessToken: this.accessToken },
// Enable Instant collaboration.
instant: true,
});
},
},
/**
* Clean up when the component is unmounted so it's ready to load another document (not needed in this example).
*/
beforeUnmount() {
PSPDFKit.unload(".pdf-container");
},
};
</script>
<style scoped>
.pdf-container {
height: 100vh;
}
</style>
Include the newly created component in src/App.vue. Don’t forget to replace psd_live_<rest_of_your_access_token> with your document’s access token:
<template>
<div id="app">
<PSPDFKitContainer accessToken="psd_live_<rest_of_your_access_token>" @loaded="handleLoaded" />
</div>
</template>
<script>
import PSPDFKitContainer from "@/components/PSPDFKitContainer";
exportdefault {
/**
* Render the `PSPDFKitContainer` component.
*/
components: {
PSPDFKitContainer,
},
/**
* Our component has a method to get notified about the document being loaded.
*/
methods: {
handleLoaded(instance) {
console.log("PSPDFKit has loaded: ", instance);
// Do something.
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
}
body {
margin: 0;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
border-radius: 4px;
display: inline-block;
padding: 6px12px;
cursor: pointer;
background:#4A8FED;
padding:10px;
color:#fff;
font:inherit;
font-size: 16px;
font-weight: bold;
}
</style>
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
This guide will walk you through the steps necessary to integrate PSPDFKit Cloud into your project. By the end, you’ll be able to present a PDF document in the PSPDFKit for Web UI.
This guide will take you through the steps necessary to integrate PSPDFKit into a newly created iOS application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Run carthage update and wait for Carthage to download PSPDFKit.
Open your application’s project or workspace in Xcode.
Drag the binaries from Carthage/Build/iOS into the Frameworks, Libraries, and Embedded Content section of your target.
To work around the compatibility issue between fat frameworks and Xcode 12, make sure EXCLUDED_ARCHS for iOS Simulator SDK is set to arm architectures (arm64) in your project configuration. This ensures you’ll avoid running into an issue while building for iOS Simulator:
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller by implementing viewDidAppear(_:) in the ViewController.swift file like so:
overridefunc viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
}
This guide will take you through the steps necessary to integrate PSPDFKit into a newly created iOS application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Open Xcode and select New Project in the File > New > Project… menu to create a new project for your application:
Choose the App template for your project:
When prompted, enter your app name (PSPDFKit-Demo) and your organization identifier (com.example) and choose Storyboard for the interface:
Click the Next button and select the location to save the project.
Click the Create button to finish.
Adding the PSPDFKit Swift Package
Open your application in Xcode and select your project’s Package Dependencies tab:
Copy the PSPDFKit Swift package repository URL into the search field:
https://github.com/PSPDFKit/PSPDFKit-SP
Under Dependency Rule, select Branch: master, and then click Add Package:
💡 Tip: Using Branch: master will ensure you always use the latest available version of PSPDFKit. Alternatively, you can select Version: Up to Next Minor to update at your own pace.
After the package download completes, select Add Package:
PSPDFKit should now be listed under Swift Package Dependencies in the Xcode Project navigator.
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller by implementing viewDidAppear(_:) in the ViewController.swift file like so:
overridefunc viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
}
This guide will take you through the steps necessary to integrate PSPDFKit into a newly created iOS application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Open Xcode and select New Project in the File > New > Project… menu to create a new project for your application:
Choose the App template for your project:
When prompted, enter your app name (PSPDFKit-Demo) and your organization identifier (com.example) and choose Storyboard for the interface:
Click the Next button and select the location to save the project.
Click the Create button to finish.
Close the Xcode project for now.
Adding the PSPDFKit CocoaPods Dependency
Open the terminal and go to the directory containing your Xcode project: cd path/to/PSPDFKit-Demo.
Run pod init. This will create a new Podfile next to your .xcodeproj file:
Open the newly created Podfile in a text editor and add the PSPDFKit pod URL:
pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'
Your Podfile should look like this:
target 'PSPDFKit-Demo'do
use_frameworks!
pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'end
Run pod install and wait for CocoaPods to download PSPDFKit.
Open your application’s newly created workspace (PSPDFKit-Demo.xcworkspace) in Xcode.
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller by implementing viewDidAppear(_:) in the ViewController.swift file like so:
overridefunc viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
}
This guide will take you through the steps necessary to integrate PSPDFKit into a newly created iOS application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Find PSPDFKit.xcframework and PSPDFKitUI.xcframework in the mounted DMG and copy them to your project directory next to the PSPDFKit-Demo.xcodeproj file.
Drag the newly copied PSPDFKit.xcframework and PSPDFKitUI.xcframework files into the Frameworks, Libraries, and Embedded Content section of your target:
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller by implementing viewDidAppear(_:) in the ViewController.swift file like so:
overridefunc viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
}
This guide will take you through the steps necessary to integrate PSPDFKit into your iOS application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
💡 Tip: The Carthage JSON URL from above will ensure you always use the latest available version of PSPDFKit. Alternatively, you can select a specific version to update at your own pace. Take a look at our Advanced Carthage Integration guide for more details.
In the terminal, change the directory to the location of your Cartfile: cd path/to/Cartfile.
Run carthage update and wait for Carthage to download PSPDFKit.
Open your application’s project or workspace in Xcode.
Drag the binaries from Carthage/Build/iOS into the Frameworks, Libraries, and Embedded Content section of your target.
To work around the compatibility issue between fat frameworks and Xcode 12, make sure EXCLUDED_ARCHS for iOS Simulator SDK is set to arm architectures (arm64) in your project configuration. This ensures you’ll avoid running into an issue while building for iOS Simulator:
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller. This can be done in a button action handler, table view cell selection delegate, or similar:
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
This guide will take you through the steps necessary to integrate PSPDFKit into your iOS application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Open your project’s Podfile and add the PSPDFKit pod URL:
pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'
Your Podfile should look like this:
target 'YourTargetName'do
use_frameworks!
pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'end
💡 Tip:latest.podspec will ensure you always use the latest available version of PSPDFKit. Alternatively, you can select a specific version by replacing latest.podspec with a version number podspec (e.g. 10.2.0.podspec) to update at your own pace. Take a look at our Advanced CocoaPods Integration guide for more details.
In the terminal, go to the directory containing your Podfile: cd path/to/Your-Project.
Run pod install and wait for CocoaPods to download PSPDFKit.
Open your application’s workspace in Xcode.
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller. This can be done in a button action handler, table view cell selection delegate, or similar:
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
This guide will take you through the steps necessary to integrate PSPDFKit into your iOS application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Open your application in Xcode and select your project’s Package Dependencies tab:
Copy the PSPDFKit Swift package repository URL into the search field:
https://github.com/PSPDFKit/PSPDFKit-SP
Under Dependency Rule, select Branch: master, and then click Add Package:
💡 Tip: Using Branch: master will ensure you always use the latest available version of PSPDFKit. Alternatively, you can select Version: Up to Next Minor to update at your own pace.
After the package download completes, select Add Package:
PSPDFKit should now be listed under Swift Package Dependencies in the Xcode Project navigator.
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller. This can be done in a button action handler, table view cell selection delegate, or similar:
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
This guide will take you through the steps necessary to integrate PSPDFKit into your iOS application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Find PSPDFKit.xcframework and PSPDFKitUI.xcframework in the mounted DMG and copy them to your project directory next to your .xcodeproj file.
Drag the newly copied PSPDFKit.xcframework and PSPDFKitUI.xcframework files into the Frameworks, Libraries, and Embedded Content section of your target:
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller. This can be done in a button action handler, table view cell selection delegate, or similar:
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
PSPDFKit is supported on Android devices running API level 21 and newer and targeting the latest stable Android version 13 (API 33). Furthermore, PSPDFKit requires apps to enable Java 8 language features to build.
Inside your app/build.gradle file, make sure to have the following configuration:
You can now start PdfActivity with the document from your assets directory:
val uri = Uri.parse("file:///android_asset/my-document.pdf")
val config = PdfActivityConfiguration.Builder(context).build()
PdfActivity.showDocument(this, uri, config)
final Uri uri = Uri.parse("file:///android_asset/my-document.pdf");
final PdfActivityConfiguration config = new PdfActivityConfiguration.Builder(context).build();
PdfActivity.showDocument(this, uri, config);
PdfActivity will now present the document from your assets directory.
Note that the android_assets folder is read-only and is used as a simple example. For actual usage, you might want to copy the file to a local folder first for full read and write privileges.
You can read more about this in our guide on opening PDFs from URLs and in Google’s Data and file storage overview.
PSPDFKit is supported on Android devices running API level 21 and newer and targeting the latest stable Android version 13 (API 33). Furthermore, PSPDFKit requires apps to enable Java 8 language features to build.
Inside your app/build.gradle file, make sure to have the following configuration:
You can now start PdfActivity with the document from your assets directory:
val uri = Uri.parse("file:///android_asset/my-document.pdf")
val config = PdfActivityConfiguration.Builder(context).build()
PdfActivity.showDocument(this, uri, config)
final Uri uri = Uri.parse("file:///android_asset/my-document.pdf");
final PdfActivityConfiguration config = new PdfActivityConfiguration.Builder(context).build();
PdfActivity.showDocument(this, uri, config);
PdfActivity will now present the document from your assets directory.
Note that the android_assets folder is read-only and is used as a simple example. For actual usage, you might want to copy the file to a local folder first for full read and write privileges.
You can read more about this in our guide on opening PDFs from URLs and in Google’s Data and file storage overview.
Copy the PSPDFKit AAR file into your project’s libs directory, and rename it to pspdfkit-8.5.0.aar.
Include PSPDFKit as a file-based dependency in your project, and provide all the transitive dependencies required by PSPDFKit (as shown below):
dependencies {
implementation files('libs/pspdfkit-8.5.0.aar')
// You must include all transitive dependencies of PSPDFKit.
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'androidx.appcompat:appcompat:1.5.1'
implementation 'androidx.recyclerview:recyclerview:'
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.palette:palette:1.0.0'
implementation 'androidx.exifinterface:exifinterface:1.3.5'
implementation 'androidx.gridlayout:gridlayout:1.0.0'
implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
implementation 'io.reactivex.rxjava2:rxjava:2.2.7'
implementation 'io.reactivex.rxjava2:rxandroid:2.1.1'
implementation 'com.getkeepsafe.relinker:relinker:1.4.5'
implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.7.20'
implementation 'androidx.compose.runtime:runtime:1.3.0'
implementation 'androidx.compose.runtime:runtime-rxjava2:1.3.0'
implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.7.20'
implementation 'com.google.android.material:material:1.7.0'
implementation 'androidx.webkit:webkit:1.5.0'
}
ℹ️ Note: Starting with the Android Gradle plugin 3.5.0, the use of flatDir repositories to include local AAR files is no longer supported. If you’ve been using this technique, you need to migrate to file-based dependencies when updating the Android Gradle plugin to 3.5.0.
The following library is included in the list of transitive dependencies:
ReLinker — to work around some versions of Android that have unreliable PackageManager implementations
This optional library can be omitted from the list of transitive dependencies if you don’t want to bundle it with your app. In such a case, PSPDFKit will detect the absence of this dependency and fall back to different implementations.
ProGuard
There’s no need to specify additional ProGuard rules since PSPDFKit uses consumersProguardFiles to keep ProGuard from obfuscating the required symbols. If you want to check out the rules, you should take a look at proguard.txt, which is located inside the PSPDFKit .aar:
cd [YOUR_AAR_LOCATION]
unzip [YOUR_AAR_NAME].aar -d aar-contents
cat aar-contents/proguard.txt
Displaying a PDF
To verify that PSPDFKit was successfully integrated into your app, try opening a PDF file with the ready-to-use PdfActivity:
Copy a PDF document into the assets directory of your Android project — for example, to src/main/assets/my-document.pdf.
Add PdfActivity to your app’s AndroidManifest.xml:
You can now start PdfActivity with the document from your assets directory:
val uri = Uri.parse("file:///android_asset/my-document.pdf")
val config = PdfActivityConfiguration.Builder(context).build()
PdfActivity.showDocument(this, uri, config)
final Uri uri = Uri.parse("file:///android_asset/my-document.pdf");
final PdfActivityConfiguration config = new PdfActivityConfiguration.Builder(context).build();
PdfActivity.showDocument(this, uri, config);
PdfActivity will now present the document from your assets directory.
Note that the android_assets folder is read-only and is used as a simple example. For actual usage, you might want to copy the file to a local folder first for full read and write privileges.
You can read more about this in our guide on opening PDFs from URLs and in Google’s Data and file storage overview.
This guide will take you through the steps necessary to integrate PSPDFKit into a newly created Mac Catalyst application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Open Xcode and select New Project in the File > New > Project… menu to create a new project for your application:
Choose the App template for your project. Mac Catalyst is a technology that enables creating Mac versions of iPad apps, so make sure to select the iOS platform at the top:
When prompted, enter your app name (PSPDFKit-Demo) and your organization identifier (com.example) and choose Storyboard for the interface:
Click the Next button and select the location to save the project.
Click the Create button to finish.
Enable Mac support for your target:
Adding the PSPDFKit Swift Package
Open your application in Xcode and select your project’s Package Dependencies tab:
Copy the PSPDFKit Swift package repository URL into the search field:
https://github.com/PSPDFKit/PSPDFKit-SP
Under Dependency Rule, select Branch: master, and then click Add Package:
💡 Tip: Using Branch: master will ensure you always use the latest available version of PSPDFKit. Alternatively, you can select Version: Up to Next Minor to update at your own pace.
After the package download completes, select Add Package:
PSPDFKit should now be listed under Swift Package Dependencies in the Xcode Project navigator.
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller by implementing viewDidAppear(_:) in the ViewController.swift file like so:
overridefunc viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
}
This guide will take you through the steps necessary to integrate PSPDFKit into a newly created Mac Catalyst application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Open Xcode and select New Project in the File > New > Project… menu to create a new project for your application:
Choose the App template for your project. Mac Catalyst is a technology that enables creating Mac versions of iPad apps, so make sure to select the iOS platform at the top:
When prompted, enter your app name (PSPDFKit-Demo) and your organization identifier (com.example) and choose Storyboard for the interface:
Click the Next button and select the location to save the project.
Click the Create button to finish.
Enable Mac support for your target:
Close the Xcode project for now.
Adding the PSPDFKit CocoaPods Dependency
Open the terminal and go to the directory containing your Xcode project: cd path/to/PSPDFKit-Demo.
Run pod init. This will create a new Podfile next to your .xcodeproj file:
Open the newly created Podfile in a text editor and add the PSPDFKit pod URL:
pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'
Your Podfile should look like this:
target 'PSPDFKit-Demo'do
use_frameworks!
pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'end
Run pod install and wait for CocoaPods to download PSPDFKit.
Open your application’s newly created workspace (PSPDFKit-Demo.xcworkspace) in Xcode.
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller by implementing viewDidAppear(_:) in the ViewController.swift file like so:
overridefunc viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
}
This guide will take you through the steps necessary to integrate PSPDFKit into a newly created Mac Catalyst application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Open Xcode and select New Project in the File > New > Project… menu to create a new project for your application:
Choose the App template for your project. Mac Catalyst is a technology that enables creating Mac versions of iPad apps, so make sure to select the iOS platform at the top:
When prompted, enter your app name (PSPDFKit-Demo) and your organization identifier (com.example) and choose Storyboard for the interface:
Click the Next button and select the location to save the project.
Find PSPDFKit.xcframework and PSPDFKitUI.xcframework in the mounted DMG and copy them to your project directory next to the PSPDFKit-Demo.xcodeproj file.
Drag the newly copied PSPDFKit.xcframework and PSPDFKitUI.xcframework files into the Frameworks, Libraries, and Embedded Content section of your target:
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller by implementing viewDidAppear(_:) in the ViewController.swift file like so:
overridefunc viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
}
This guide will take you through the steps necessary to integrate PSPDFKit into your Mac Catalyst application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Open your application in Xcode and select your project’s Package Dependencies tab:
Copy the PSPDFKit Swift package repository URL into the search field:
https://github.com/PSPDFKit/PSPDFKit-SP
Under Dependency Rule, select Branch: master, and then click Add Package:
💡 Tip: Using Branch: master will ensure you always use the latest available version of PSPDFKit. Alternatively, you can select Version: Up to Next Minor to update at your own pace.
After the package download completes, select Add Package:
PSPDFKit should now be listed under Swift Package Dependencies in the Xcode Project navigator.
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller. This can be done in a button action handler, table view cell selection delegate, or similar:
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
This guide will take you through the steps necessary to integrate PSPDFKit into your Mac Catalyst application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Open your project’s Podfile and add the PSPDFKit pod URL:
pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'
Your Podfile should look like this:
target 'YourTargetName'do
use_frameworks!
pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'end
💡 Tip:latest.podspec will ensure you always use the latest available version of PSPDFKit. Alternatively, you can select a specific version by replacing latest.podspec with a version number podspec (e.g. 10.2.0.podspec) to update at your own pace. Take a look at our Advanced CocoaPods Integration guide for more details.
In the terminal, go to the directory containing your Podfile: cd path/to/Your-Project.
Run pod install and wait for CocoaPods to download PSPDFKit.
Open your application’s workspace in Xcode.
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller by implementing viewDidAppear(_:) in the ViewController.swift file like so:
overridefunc viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
}
This guide will take you through the steps necessary to integrate PSPDFKit into your Mac Catalyst application. By the end, you’ll be able to present a PDF document in the default PSPDFKit UI.
Find PSPDFKit.xcframework and PSPDFKitUI.xcframework in the mounted DMG and copy them to your project directory next to your .xcodeproj file.
Drag the newly copied PSPDFKit.xcframework and PSPDFKitUI.xcframework files into the Frameworks, Libraries, and Embedded Content section of your target:
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Import PSPDFKit and PSPDFKitUI at the top of your UIViewController subclass implementation:
importPSPDFKitimportPSPDFKitUI
@import PSPDFKit;
@import PSPDFKitUI;
Load your PDF document and display the view controller. This can be done in a button action handler, table view cell selection delegate, or similar:
// Update to use your document name.let fileURL = Bundle.main.url(forResource: "Document", withExtension: "pdf")!
let document = Document(url: fileURL)
// The configuration closure is optional and allows additional customization.let pdfController = PDFViewController(document: document) {
$0.isPageLabelEnabled = false
}
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
present(UINavigationController(rootViewController: pdfController), animated: true)
// Update to use your document name.
NSURL *documentURL = [NSBundle.mainBundle URLForResource:@"Document" withExtension:@"pdf"];
PSPDFDocument *document = [[PSPDFDocument alloc] initWithURL:documentURL];
// The configuration object is optional and allows additional customization.
PSPDFViewController *pdfController = [[PSPDFViewController alloc] initWithDocument:document configuration:[PSPDFConfiguration configurationWithBuilder:^(PSPDFConfigurationBuilder *builder) {
builder.pageLabelEnabled = NO;
}]];
// Present the PDF view controller within a `UINavigationController` to show built-in toolbar buttons.
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:pdfController];
[self presentViewController:navController animated:YES completion:NULL];
You can find our Flutter library on pub.dev and GitHub.
Requirements
ℹ️ Note: The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.
A development environment for running React Native projects using the React Native CLI (not the Expo CLI)
In the terminal, change the current working directory to where you’ll save your project. This example uses the pdf folder created in the home directory:
mkdir ~/pdf
cd ~/pdf
cd /d %userprofile%
mkdir pdf
cd pdf
Create the React Native project by running the following command:
npx react-native init PSPDFKitDemo
Installing the PSPDFKit React Native Dependency
In the terminal app, change the location of the current working directory inside the newly created project:
cd PSPDFKitDemo
Add the PSPDFKit plugin:
yarn add github:PSPDFKit/react-native
Install all the dependencies for the project:
yarn install
Open your project’s build.gradle file:
open android/build.gradle
Add the PSPDFKit repository to download the PSPDFKit library:
Open your project’s Podfile in a text editor to update the platform to iOS 14, and add the PSPDFKit Podspec:
open ios/Podfile
Your Podfile should look like this:
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
- platform :ios, '11.0'
+ platform :ios, '14.0'
target 'PSPDFKitDemo' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
target 'PSPDFKitDemoTests' do
inherit! :complete
# Pods for testing
end
+ pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
end
end
Change the location of the current working directory to the ios folder:
cd ios
Install the CocoaPods dependencies:
pod install
Open your project’s Workspace in Xcode:
open PSPDFKitDemo.xcworkspace
Make sure the deployment target is set to 14.0 or higher:
Change View controller-based status bar appearance to YES in your project’s Info.plist:
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Change the location of the current working directory back to the root project folder:
ℹ️ Note: The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.
A development environment for running React Native projects using the React Native CLI (not the Expo CLI)
Open your project’s Podfile in a text editor to update the platform to iOS 14, and add the PSPDFKit Podspec:
open ios/Podfile
Your Podfile should look like this:
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
- platform :ios, '11.0'
+ platform :ios, '14.0'
target 'PSPDFKitDemo' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
target 'PSPDFKitDemoTests' do
inherit! :complete
# Pods for testing
end
+ pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
end
end
Change the location of the current working directory to the ios folder:
cd ios
Install the CocoaPods dependencies:
pod install
Open your project’s Workspace in Xcode:
open YourProject.xcworkspace
Make sure the deployment target is set to 14.0 or higher:
Change View controller-based status bar appearance to YES in your project’s Info.plist:
Displaying a PDF
Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.
Change the location of the current working directory back to the root project folder:
cd ..
Create the assets directory if you don’t have one already:
ℹ️ Note: The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.
A development environment for running React Native projects using the React Native CLI (not the Expo CLI)
ℹ️ Note: The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.
A development environment for running React Native projects using the React Native CLI (not the Expo CLI)
In the terminal, change the current working directory to where you’ll save your project. This example uses the pdf folder created in the home directory:
mkdir ~/pdf
cd ~/pdf
cd /d %userprofile%
mkdir pdf
cd pdf
Create the React Native project by running the following command:
npx react-native init PSPDFKitDemo
Installing the PSPDFKit React Native Dependency
In the terminal app, change the location of the current working directory inside the newly created project:
