Getting Started on Web

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.

If you prefer a video tutorial, watch our step-by-step Getting Started with PSPDFKit video guide.

Requirements

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.

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:

cp -R ./node_modules/pspdfkit/dist/ ./assets/
  1. Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Integrating into Your Project

  1. 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.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Include pspdfkit.js in your HTML page:

<script src="assets/pspdfkit.js"></script>
  1. Initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
  	document: "document.pdf"
	})
	.then(function(instance) {
		console.log("PSPDFKit loaded", instance);
	})
	.catch(function(error) {
		console.error(error.message);
	});
</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 src="assets/pspdfkit.js"></script>

    <script>
      PSPDFKit.load({
        container: "#pspdfkit",
        document: "document.pdf",
      })
        .then(function(instance) {
          console.log("PSPDFKit loaded", instance);
        })
        .catch(function(error) {
          console.error(error.message);
        });
    </script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Next Steps

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.

If you prefer a video tutorial, watch our step-by-step Getting Started with PSPDFKit video guide.

Requirements

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.

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:

cp -R ./node_modules/pspdfkit/dist/ ./assets/
  1. Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Integrating into Your Project

  1. 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.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. 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);
});
  1. 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.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Next Steps

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.

If you prefer a video tutorial, watch our step-by-step Getting Started with PSPDFKit video guide.

Requirements

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.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Integrating into Your Project

  1. 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.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Include pspdfkit.js in your HTML page:

<script src="assets/pspdfkit.js"></script>
  1. Initialize PSPDFKit for Web in JavaScript by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
  	document: "document.pdf"
	})
	.then(function(instance) {
		console.log("PSPDFKit loaded", instance);
	})
	.catch(function(error) {
		console.error(error.message);
	});
</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 src="assets/pspdfkit.js"></script>

    <script>
      PSPDFKit.load({
        container: "#pspdfkit",
        document: "document.pdf",
      })
        .then(function(instance) {
          console.log("PSPDFKit loaded", instance);
        })
        .catch(function(error) {
          console.error(error.message);
        });
    </script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Next Steps

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.

If you prefer a video tutorial, watch our step-by-step Getting Started with PSPDFKit video guide.

Requirements

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.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Integrating into Your Project

  1. 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.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. 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);
});
  1. 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.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Getting Started Video Guide

Next Steps

Integrate into a React 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

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

  1. Create a new React app using the Create React App tool:

yarn create react-app pspdfkit-react-example
npx create-react-app pspdfkit-react-example
  1. Change to the created project directory:

cd pspdfkit-react-example

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. 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";

export default function PdfViewerComponent(props) {
const containerRef = useRef(null);

useEffect(() => {
	const container = containerRef.current;
	let instance, PSPDFKit;
	(async function() {
		PSPDFKit = await import("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"}}/>
);
}
  1. In the src folder, replace the contents of the App.js file with the following. This includes the newly created component in your app:

import PdfViewerComponent from './components/PdfViewerComponent';

function App() {
	return (
		<div className="App">
			<div className="PDF-viewer">
			<PdfViewerComponent
				document={"document.pdf"}
			/>
			</div>
		</div>
	);
}

export default App;
  1. Your project structure should now look like this:

pspdfkit-react-example
├── public
│   ├── pspdfkit-lib
│   └── document.pdf
├── src
│   ├── components
│   |   └── PdfViewerComponent.js
|   └── App.js
├── package.json
└── yarn.lock
pspdfkit-react-example
├── public
│   ├── pspdfkit-lib
│   └── document.pdf
├── src
│   ├── components
│   |   └── PdfViewerComponent.js
|   └── App.js
├── package.json
└── package-lock.json
  1. Start the app and run it in your default browser:

yarn start
npm start

Next Steps

Integrate into a React 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.

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. 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";

export default function PdfViewerComponent(props) {
const containerRef = useRef(null);

useEffect(() => {
	const container = containerRef.current;
	let instance, PSPDFKit;
	(async function() {
		PSPDFKit = await import("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"}}/>
);
}
  1. 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>
	);
}
  1. Add the following to the rendering function in your app:

DocumentViewerComponent()
  1. Start the app and run it in your default browser:

yarn start
npm start

Next Steps

Integrate into an Angular 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

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

  1. Install the Angular CLI:

yarn global add @angular/cli
npm install -g @angular/cli
  1. Create a new Angular application:

ng new my-app
  1. The Angular CLI will ask you information about the app configuration. Accept the defaults by repeatedly pressing the Enter key.

  2. Change to the created project directory:

cd my-app

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

  2. In the angular.json file, add the following to the assets option:

"assets": [
	"src/assets",
+	{
+		"glob": "**/*",
+		"input": "./node_modules/pspdfkit/dist/pspdfkit-lib/",
+		"output": "./assets/pspdfkit-lib/"
+	}
]

Angular will now copy the PSPDFKit library assets to the assets directory before running your app.

Displaying a PDF

  1. 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.

  2. 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>
  1. 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"]
})
export class 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 as any).instance = instance;
		});
	}
}
  1. Start the app and open it in your default browser:

yarn start --open
npm start --open

Next Steps

Integrate into an Angular 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.

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install --save pspdfkit
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

  2. In the angular.json file, add the following to the assets option:

"assets": [
	"src/assets",
+	{
+		"glob": "**/*",
+		"input": "./node_modules/pspdfkit/dist/pspdfkit-lib/",
+		"output": "./assets/pspdfkit-lib/"
+	}
]

Angular will now copy the PSPDFKit library assets to the assets directory before running your app.

Displaying a PDF

  1. 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.

  2. Generate a new PDF viewer component:

ng generate component pdf-viewer
  1. In the src/app/pdf-viewer folder, replace the contents of the pdf-viewer.component.html file with the following:

<div class="pdf-viewer">
	<div id="pspdfkit-container" style="width: 100%; height: 100vh"></div>
</div>
  1. 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']
})
export class 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 as any).instance = instance;
		});
	}
}
  1. 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>
  1. Start the app and open it in your default browser:

yarn start --open
npm start --open

Next Steps

Integrate into a Vue.js 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

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Installing the Vue.js CLI

First install the Vue.js command-line tool for managing your Vue.js projects:

yarn global add @vue/cli
npm install -g @vue/cli

Creating the Project

  1. Create a new Vue.js app:

vue create my-app
  1. Select Default (Vue 3) ([Vue 3] babel, eslint) from the list.

Activity controller

  1. Select the package manager you want to use (we recommend Yarn).

  2. Change to the created project directory:

cd my-app

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Create a new directory under public called js:

mkdir -p public/js
  1. Copy the PSPDFKit for Web library assets to the public/js directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/js/pspdfkit-lib
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. 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.
 */
export default {
  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>
  1. Include the newly created component in src/App.vue:

<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";

export default {
  data() {
    return {
      pdfFile: this.pdfFile || "/example.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: 6px 12px;
    cursor: pointer;
    background:#4A8FED;
    padding:10px;
    color:#fff;
    font:inherit;
    font-size: 16px;
    font-weight: bold;
}

</style>
  1. Start the app:

yarn serve
npm run serve
  1. Open http://localhost:8080/ in your browser.

Next Steps

Integrate into a Vue.js 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.

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Create a new directory under public called js:

mkdir -p public/js
  1. Copy the PSPDFKit for Web library assets to the public/js directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/js/pspdfkit-lib
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. 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.
 */
export default {
  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>
  1. Include the newly created component in src/App.vue:

<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";

export default {
  data() {
    return {
      pdfFile: this.pdfFile || "/example.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: 6px 12px;
    cursor: pointer;
    background:#4A8FED;
    padding:10px;
    color:#fff;
    font:inherit;
    font-size: 16px;
    font-weight: bold;
}

</style>
  1. Start the app:

yarn serve
npm run serve
  1. Open http://localhost:8080/ in your browser.

Next Steps

Integrate into a Next.js 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

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

  1. Create a new Next.js app using the create-next-app tool:

yarn create next-app pspdfkit-next-js-example
npx create-next-app pspdfkit-next-js-example
  1. Change to the created project directory:

cd pspdfkit-next-js-example

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. Add the following code to your pages/index.js file:

import React, { useEffect, useRef } from "react";

export default function App() {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    let PSPDFKit;

    (async function () {
      PSPDFKit = await import("pspdfkit");
      
      if (PSPDFKit) {
        PSPDFKit.unload(container);
      }
      
      await PSPDFKit.load({
        container,
        document: "/document.pdf",
        baseUrl: `${window.location.protocol}//${window.location.host}/`,
      });
    })();

    return () => PSPDFKit && PSPDFKit.unload(container);
  }, []);

  return (
      <div ref={containerRef} style={{ height: "100vh" }} />
  );
}
  1. Your project structure should now look like this:

pspdfkit-next-js-example
├── pages
│   └── index.js
├── public
│   ├── document.pdf
│   └── pspdfkit-lib
└── next.config.js
  1. Start the app:

yarn dev
npm run dev
  1. Navigate to http://localhost:3000 to view the website.

Next Steps

Integrate into a Next.js 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.

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. Add the following code to your pages/index.js file:

import React, { useEffect, useRef } from "react";

export default function App() {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    let PSPDFKit;

    (async function () {
      PSPDFKit = await import("pspdfkit");
      
      if (PSPDFKit) {
        PSPDFKit.unload(container);
      }
      
      await PSPDFKit.load({
        container,
        document: "/document.pdf",
        baseUrl: `${window.location.protocol}//${window.location.host}/`,
      });
    })();

    return () => PSPDFKit && PSPDFKit.unload(container);
  }, []);

  return (
      <div ref={containerRef} style={{ height: "100vh" }} />
  );
}
  1. Start the app:

yarn dev
npm run dev
  1. Navigate to http://localhost:3000 to view the website.

Next Steps

Integrate into a TypeScript 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

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using PSPDFKit for Web.

Install TypeScript globally by running the following command:

npm install -g typescript

Creating a New Project

  1. Initialize a new npm workspace in an empty directory:

yarn init -y
npm init -y
  1. Create a tsconfig.json file and use the following configuration:

{
	"compilerOptions": {
		"removeComments": true,
		"preserveConstEnums": true,
		"module": "commonjs",
		"target": "es5",
		"sourceMap": true,
		"noImplicitAny": true,
		"esModuleInterop": true
	},
	"include": ["src/**/*"]
}

Adding PSPDFKit and Configuring webpack

  1. 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
  1. Install the necessary dependencies for webpack, create a config directory, and place your webpack configuration file inside it:

npm i -D webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin cross-env copy-webpack-plugin clean-webpack-plugin

mkdir config && touch config/webpack.js
  1. Use the following configuration for webpack 5:

// webpack.js

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/example.pdf', 
		to: './example.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

  1. 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.

  2. Create an index.html file inside the src directory and add the following code:

<!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>

This adds an empty<div> element to where PSPDFKit will be mounted.

  1. Declare the height of this element in your CSS file like this:

/* index.css */

.container {
	height: 100vh;
}
  1. Now, create an index.ts file inside the src directory:

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('example.pdf'); // Pass your PDF file.
  1. Your project structure should now look like this:

pspdfkit-typescript-example
├── assets
│   └── example.pdf
├── config
│   └── webpack.js
├── src 
│   ├── index.css
│   ├── index.html
│   └── index.ts
├── package-lock.json
├── package.json
└── tsconfig.json

Running the Project

  1. Install the serve package to run the project:

yarn global add serve
npm install --global serve
  1. Add the following scripts to your package.json file:

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.js",
    "prestart": "npm run build",
    "dev": "tsc",
    "start": "serve -l 8080 ./dist"
},
  1. Start the project:

yarn start
npm start

Navigate to http://localhost:8080 to see the contents of the dist directory.

Next Steps

Integrate into a TypeScript 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.

Adding PSPDFKit and Configuring webpack

  1. 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
  1. Install the necessary dependencies for webpack, create a config directory, and place your webpack configuration file inside it:

npm i -D webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin cross-env copy-webpack-plugin clean-webpack-plugin

mkdir config && touch config/webpack.js
  1. Use the following configuration for webpack 5:

// webpack.js

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/example.pdf', 
		to: './example.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

  1. 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.

  2. Create an index.html file inside the src directory and add the following code:

<!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>

This adds an empty<div> element to where PSPDFKit will be mounted.

  1. Declare the height of this element in your CSS file like this:

/* index.css */

.container {
	height: 100vh;
}
  1. Now, create an index.ts file inside the src directory:

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('example.pdf'); // Pass your PDF file.

Running the Project

  1. Install the serve package to run the project:

yarn global add serve
npm install --global serve
  1. Add the following scripts to your package.json file:

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.js",
    "prestart": "npm run build",
    "dev": "tsc",
    "start": "serve -l 8080 ./dist"
},
  1. Start the project:

yarn start
npm start

Navigate to http://localhost:8080 to see the contents of the dist directory.

Next Steps

Integrate into a Svelte 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

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

  1. Create a new Svelte app using the degit tool with the Svelte template:

npx degit sveltejs/template my-svelte-project
  1. Change to the created project directory:

cd my-svelte-project
  1. Install the dependencies:

yarn install
npm install

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. Add a component wrapper for the PSPDFKit library and save it as src/PdfViewerComponent.svelte:

// src/PdfViewerComponent.svelte

<script>
  import { afterUpdate, onMount, onDestroy } from "svelte";
  import PSPDFKit from "pspdfkit";

  let currentDocument;
  let container;
  let instance;

  export let document;

  async function load() {
    currentDocument = document;
    instance = await PSPDFKit.load({
      baseUrl: `${window.location.protocol}//${window.location.host}/`,
      container: container,
      document: document,
    });
  }

  function unload() {
    PSPDFKit.unload(instance);
    instance = null;
  }

  onMount(() => {
    load();
  });

  afterUpdate(() => {
    if (document !== currentDocument) {
      unload();
      load();
    }
  });

  onDestroy(() => {
    unload();
  });
</script>

<body>
  <div bind:this={container} style="height: 100vh; width: 100vw;" />
</body>
  1. Replace the contents of the App.svelte file with the newly created component:

// src/App.svelte
  <script>
    import Pspdfkit from './PdfViewerComponent.svelte';
  </script>

  <main>
    <Pspdfkit document='document.pdf'/>
  </main>
  1. Start the app:

yarn run dev
npm run dev
  1. Open http://localhost:8080 in your browser.

Next Steps

Integrate into a Svelte 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.

Adding PSPDFKit to Your Project

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib
  1. Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. Add a component wrapper for the PSPDFKit library and save it as src/PdfViewerComponent.svelte:

// src/PdfViewerComponent.svelte

<script>
  import { afterUpdate, onMount, onDestroy } from "svelte";
  import PSPDFKit from "pspdfkit";

  let currentDocument;
  let container;
  let instance;

  export let document;

  async function load() {
    currentDocument = document;
    instance = await PSPDFKit.load({
      baseUrl: `${window.location.protocol}//${window.location.host}/`,
      container: container,
      document: document,
    });
  }

  function unload() {
    PSPDFKit.unload(instance);
    instance = null;
  }

  onMount(() => {
    load();
  });

  afterUpdate(() => {
    if (document !== currentDocument) {
      unload();
      load();
    }
  });

  onDestroy(() => {
    unload();
  });
</script>

<body>
  <div bind:this={container} style="height: 100vh; width: 100vw;" />
</body>
  1. Include the PdfViewerComponent component in your app:

// src/App.svelte
  <script>
    import Pspdfkit from './PdfViewerComponent.svelte';
  </script>

  <main>
    <Pspdfkit document='document.pdf'/>
  </main>
  1. Start the app:

yarn run dev
npm run dev
  1. Open http://localhost:8080 in your browser.

Next Steps

Integrate into an Electron 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

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

  1. Initialize a new npm workspace in an empty directory:

yarn init -y
npm init -y
  1. Install Electron and electron-packager as dev dependencies:

yarn add --dev electron electron-packager
npm install --dev electron electron-packager
  1. Modify your package.json to add the start script:

{
	"name": "PSPDFKit Electron Example",
	"version": "1.0.0",
	"main": "index.js",
	"license": "MIT",
	"devDependencies": {
		"electron": "^19.0.0",
      "electron-packager": "^15.5.1",
	},
	"scripts": {
		"start": "electron ."
	}
}

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

Displaying a PDF

  1. 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.

  2. Create an index.html file to set up a mount target in the HTML file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>PSPDFKit for Electron Example App</title>

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background: #f6f7fa;
      }

      header {
        display: none;
      }

      #root {
        width: 100vw;
        height: 100vh;
      }

      /**
       * Offset the frameless window alternative on macOS.
       * https://electronjs.org/docs/api/frameless-window#alternatives-on-macos
       */

      body.platform-darwin header {
        -webkit-app-region: drag;
        display: block;
        height: 22px;
        background-color: rgb(252, 253, 254);
      }

      body.platform-darwin #root {
        height: calc(100vh - 22px);
      }
    </style>
  </head>

  <body>
    <header></header>
    <div id="root"></div>

    <script src="./pspdfkit.js"></script>

    <script type="module">
      import { dragAndDrop } from "./lib/drag-and-drop.js";
      import { makeToolbarItems } from "./lib/toolbar.js";

      /**
       * We append `process.platform` to `<body>` as a CSS class so we can offset
       * the frameless window alternative on macOS.
       * https://electronjs.org/docs/api/frameless-window#alternatives-on-macos
       */
      document.body.classList.add(
        `platform-${window.electron.processPlatform()}`
      );

      /**
       * We store the `PSPDFKit.Instance` in this variable so we can access it from
       * everywhere.
       */
      let instance = null;

      const { documentExport, documentImport, askUserToDiscardChanges } =
        window.electron;

      /**
       * Creates an `onAnnotationsChange` handler that keeps track of changes.
       *
       * We skip the first call since `annotations.change` fires when the PDF is
       * initialized and populated with annotations.
       */
      let hasUnsavedAnnotations = false;

      function createOnAnnotationsChange() {
        let initialized = false;

        return () => {
          if (initialized) {
            hasUnsavedAnnotations = true;
          } else {
            initialized = true;
          }
        };
      }

      /**
       * If there's an existing running instance of PSPDFKit, it's destroyed before
       * a creating a new one.
       *
       * This process will make sure the WebAssembly module is optimally reused.
       */
      async function load(document) {
        if (instance) {
          PSPDFKit.unload(instance);
          hasUnsavedAnnotations = false;
          instance = null;
        }

        // Create our custom toolbar.
        const toolbarItems = makeToolbarItems(
          PSPDFKit.defaultToolbarItems,
          function exportFile() {
            documentExport(instance, () => (hasUnsavedAnnotations = false));
          },
          function importFile() {
            if (hasUnsavedAnnotations) {
              askUserToDiscardChanges(() => documentImport(load));
            } else {
              documentImport(load);
            }
          }
        );

        // Set up the configuration object. A custom style sheet is used to customize
        // the look and feel of PSPDFKit.
        const configuration = {
          document,
          container: "#root",
          styleSheet: ["./pspdfkit.css"],
          // `electronAppName` must match the license's bundle ID.
          electronAppName: "pspdfkit-electron-example",
          // Add when using a license key.
          // `licenseKey`: "LICENSE KEY GOES HERE",
        };

        instance = await PSPDFKit.load(configuration);

        instance.setToolbarItems(toolbarItems);
        instance.addEventListener(
          "annotations.change",
          createOnAnnotationsChange()
        );

        dragAndDrop(instance, (file) => {
          if (hasUnsavedAnnotations) {
            askUserToDiscardChanges(() => load(file));
          } else {
            load(file);
          }
        });
      }

      // Open a default document when the app starts.
      window.onload = () => load("./assets/example.pdf");
    </script>
  </body>
</html>
  1. Create a preload script to run before the main renderer process:

// preload.js

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,
});
  1. Now, create the main JavaScript file to get access to the preload script inside the BrowserWindow contructor’s webPreferences option:

const electron = require("electron");
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

const path = require("path");
const url = require("url");

// Keep a global reference of the window object. If you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow = null;
let windowInCreation = false;

function createWindow() {
  windowInCreation = true;
  pspdfkitMain.initialize();

  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    titleBarStyle: "hidden",
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false,
      preload: path.join(__dirname, "preload.js"),
    },
  });

  windowInCreation = false;

  // And load the `index.html` of the app.
  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, "index.html"),
      protocol: "file:",
      slashes: true,
    })
  );

  // Open the DevTools.
  // mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on("closed", function () {
    // Dereference the window object. Usually, you'd store windows
    // in an array. If your app supports multi-windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
    pspdfkitMain.cleanup();
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

// Quit when all windows are closed.
app.on("window-all-closed", function () {
  // On macOS, it's common for applications and their menu bars
  // to stay active until the user quits explicitly with Command + Q.
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", function () {
  // On macOS, it's common to recreate a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null && windowInCreation === false) {
    createWindow();
  }
});

// In this file, you can include the rest of your app's specific
// main process code. You can also put the files related to 
// the main process in separate files and require them here.
  1. Start the app:

yarn start
npm start

Next Steps

Integrate into an Electron 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.

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

Displaying a PDF

  1. 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.

  2. Set up a mount target in the HTML file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>PSPDFKit for Electron Example App</title>

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background: #f6f7fa;
      }

      header {
        display: none;
      }

      #root {
        width: 100vw;
        height: 100vh;
      }

      /**
       * Offset the frameless window alternative on macOS.
       * https://electronjs.org/docs/api/frameless-window#alternatives-on-macos
       */

      body.platform-darwin header {
        -webkit-app-region: drag;
        display: block;
        height: 22px;
        background-color: rgb(252, 253, 254);
      }

      body.platform-darwin #root {
        height: calc(100vh - 22px);
      }
    </style>
  </head>

  <body>
    <header></header>
    <div id="root"></div>

    <script src="./pspdfkit.js"></script>

    <script type="module">
      import { dragAndDrop } from "./lib/drag-and-drop.js";
      import { makeToolbarItems } from "./lib/toolbar.js";

      /**
       * We append `process.platform` to `<body>` as a CSS class so we can offset
       * the frameless window alternative on macOS.
       * https://electronjs.org/docs/api/frameless-window#alternatives-on-macos
       */
      document.body.classList.add(
        `platform-${window.electron.processPlatform()}`
      );

      /**
       * We store the `PSPDFKit.Instance` in this variable so we can access it from
       * everywhere.
       */
      let instance = null;

      const { documentExport, documentImport, askUserToDiscardChanges } =
        window.electron;

      /**
       * Creates an `onAnnotationsChange` handler that keeps track of changes.
       *
       * We skip the first call since `annotations.change` fires when the PDF is
       * initialized and populated with annotations.
       */
      let hasUnsavedAnnotations = false;

      function createOnAnnotationsChange() {
        let initialized = false;

        return () => {
          if (initialized) {
            hasUnsavedAnnotations = true;
          } else {
            initialized = true;
          }
        };
      }

      /**
       * If there's an existing running instance of PSPDFKit, it's destroyed before
       * a creating a new one.
       *
       * This process will make sure the WebAssembly module is optimally reused.
       */
      async function load(document) {
        if (instance) {
          PSPDFKit.unload(instance);
          hasUnsavedAnnotations = false;
          instance = null;
        }

        // Create our custom toolbar.
        const toolbarItems = makeToolbarItems(
          PSPDFKit.defaultToolbarItems,
          function exportFile() {
            documentExport(instance, () => (hasUnsavedAnnotations = false));
          },
          function importFile() {
            if (hasUnsavedAnnotations) {
              askUserToDiscardChanges(() => documentImport(load));
            } else {
              documentImport(load);
            }
          }
        );

        // Set up the configuration object. A custom style sheet is used to customize
        // the look and feel of PSPDFKit.
        const configuration = {
          document,
          container: "#root",
          styleSheet: ["./pspdfkit.css"],
          // `electronAppName` must match the license's bundle ID.
          electronAppName: "pspdfkit-electron-example",
          // Add when using a license key.
          // `licenseKey`: "LICENSE KEY GOES HERE",
        };

        instance = await PSPDFKit.load(configuration);

        instance.setToolbarItems(toolbarItems);
        instance.addEventListener(
          "annotations.change",
          createOnAnnotationsChange()
        );

        dragAndDrop(instance, (file) => {
          if (hasUnsavedAnnotations) {
            askUserToDiscardChanges(() => load(file));
          } else {
            load(file);
          }
        });
      }

      // Open a default document when the app starts.
      window.onload = () => load("./assets/example.pdf");
    </script>
  </body>
</html>
  1. 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 },
  },
]);
  1. Start the app:

yarn start
npm start

Next Steps

Integrate into a Nuxt.js 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

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

  1. 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
  1. 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.

Nuxt.js terminal

  1. Change to the created project directory:

cd pspdfkit-app

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the static/ directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib static/pspdfkit-lib
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. Add a component wrapper for the PSPDFKit library and save it as components/PSPDFKitContainer.vue:

<template>
  <div class="pdf-container"></div>
</template>

<script>
/**
 * PSPDFKit for Web example component.
 */
export default {
  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>
  1. Include the newly created component in pages/index.vue:

<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";

export default {
  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: 6px 12px;
  cursor: pointer;
  background: #4a8fed;
  padding: 10px;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: bold;
}
</style>
  1. Start the app:

yarn dev
npm run dev
  1. Open http://localhost:3000/ in your browser.

Next Steps

Integrate into a Nuxt.js 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.

Adding PSPDFKit

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web library assets to the static/ directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib static/pspdfkit-lib
  1. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. Add a component wrapper for the PSPDFKit library and save it as components/PSPDFKitContainer.vue:

<template>
  <div class="pdf-container"></div>
</template>

<script>
/**
 * PSPDFKit for Web example component.
 */
export default {
  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>
  1. Include the newly created component in pages/index.vue:

<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";

export default {
  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: 6px 12px;
  cursor: pointer;
  background: #4a8fed;
  padding: 10px;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: bold;
}
</style>
  1. Start the app:

yarn dev
npm run dev
  1. Open http://localhost:3000/ in your browser.

Next Steps

Integrate into an ASP.NET 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

  1. Open Visual Studio and select New Solution in the File > New Solution… menu to create a new project for your application:

visual-studio-new-solution

  1. Choose the Web Application (Model-View-Controller) template:

visual-studio-template

  1. Choose .NET 5.0 for the target framework:

visual-studio-target-framework

  1. When prompted, choose your app name (PSPDFKit_ASPNETExample) and use the default options:

visual-studio-project-name

  1. 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:

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. 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.

  3. Make sure your wwwroot/lib folder contains the file pspdfkit.js and a pspdfkit-lib directory with library assets.

  4. 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:

<!DOCTYPE html>
<html lang="en">
<head>
    @* ... *@ 
    <title>@ViewData["Title"] - PSPDFKit_ASPNETExample</title>
</head>
<body>
   @RenderBody()
</body>
</html>
  1. Include pspdfkit.js. The path is relative to the wwwroot directory:

<script src="/lib/pspdfkit.js"></script>
  1. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Initialize PSPDFKit for Web by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
		document: "document.pdf",
	})
		.then(function(instance) {
			console.log("PSPDFKit loaded", instance);
		})
		.catch(function(error) {
			console.error(error.message);
		});
</script>

Here’s the full Views/Home/Index.cshtml:

Views/Home/Index.cshtml
<!-- 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

  1. 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.

  2. Select Run > Start Debugging. This will start your app and open it in your default browser.

Next Steps

Integrate into an ASP.NET 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

Creating a New Project

  1. Create a new ASP.NET Core Web App (Model-View-Controller):

dotnet new mvc -o pspdfkit-aspnet-example
  1. 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:

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. 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.

  3. Make sure your wwwroot/lib folder contains the file pspdfkit.js and a pspdfkit-lib directory with library assets.

  4. 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:

<!DOCTYPE html>
<html lang="en">
<head>
    @* ... *@ 
    <title>@ViewData["Title"] - PSPDFKit_ASPNETExample</title>
</head>
<body>
   @RenderBody()
</body>
</html>
  1. Include pspdfkit.js. The path is relative to the wwwroot directory:

<script src="/lib/pspdfkit.js"></script>
  1. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Initialize PSPDFKit for Web by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
		document: "document.pdf",
	})
		.then(function(instance) {
			console.log("PSPDFKit loaded", instance);
		})
		.catch(function(error) {
			console.error(error.message);
		});
</script>

Here’s the full Views/Home/Index.cshtml:

Views/Home/Index.cshtml
<!-- 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

  1. 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.

  2. Start the app and run it in your default browser:

dotnet watch run

Next Steps

Integrate into an ASP.NET 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

Adding PSPDFKit

PSPDFKit for Web library files are distributed as an archive that can be extracted manually:

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. 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.

  3. Make sure your wwwroot/lib folder contains the file pspdfkit.js and a pspdfkit-lib directory with library assets.

  4. 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.

  1. Include pspdfkit.js. The path is relative to the wwwroot directory:

<script src="/lib/pspdfkit.js"></script>
  1. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Initialize PSPDFKit for Web by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
		document: "document.pdf",
	})
		.then(function(instance) {
			console.log("PSPDFKit loaded", instance);
		})
		.catch(function(error) {
			console.error(error.message);
		});
</script>

Displaying the PDF

  1. 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.

  2. Select Run > Start Debugging. This will start your app and open it in your default browser.

Next Steps

Integrate into an ASP.NET 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

Adding PSPDFKit

PSPDFKit for Web library files are distributed as an archive that can be extracted manually:

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. 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.

  3. Make sure your wwwroot/lib folder contains the file pspdfkit.js and a pspdfkit-lib directory with library assets.

  4. 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.

  1. Include pspdfkit.js. The path is relative to the wwwroot directory:

<script src="/lib/pspdfkit.js"></script>
  1. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Initialize PSPDFKit for Web by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
		document: "document.pdf",
	})
		.then(function(instance) {
			console.log("PSPDFKit loaded", instance);
		})
		.catch(function(error) {
			console.error(error.message);
		});
</script>

Displaying the PDF

  1. 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.

  2. Start the app and run it in your default browser:

dotnet watch run

Next Steps

Integrate into a Blazor Server 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

  1. Open Visual Studio and select New Solution in the File > New Solution… menu to create a new project for your application:

visual-studio-new-solution

  1. Choose the Blazor Server App project template:

visual-studio-template

  1. Choose .NET 5.0 for the target framework:

visual-studio-template

  1. When prompted, choose your app name (PSPDFKit_BlazorServer) and use the default options:

visual-studio-project-name

  1. 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.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s wwwroot folder.

  3. Make sure your wwwroot folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

Displaying a PDF

  1. 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.

  2. To clean out the UI, go to the Shared/MainLayout.razor component and keep only the @Body property:

@inherits LayoutComponentBase
@Body
  1. Go to the Home route located under the Pages/Index.razor file, and replace the contents of the file with the following:

@page "/"
@inject IJSRuntime JS

<div id='container' style='background: gray; width: 100vw; height: 100vh; margin: 0 auto;'></div>

@code {

    protected override async void OnAfterRender(bool firstRender)
    {
      if (firstRender) {
        await JS.InvokeVoidAsync("loadPDF", "#container", "document.pdf");
      }
    }
}
  1. 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

  1. Select Run > Start Debugging. This will start your app and open it in your default browser.

Next Steps

Integrate into a Blazor Server 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

Creating a New Project

  1. Create a new Blazor project:

dotnet new blazorserver -o PSPDFKit_BlazorServer
  1. Change to the created project directory:

cd PSPDFKit_BlazorServer

Adding PSPDFKit

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s wwwroot folder.

  3. Make sure your wwwroot folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

Displaying a PDF

  1. 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.

  2. To clean out the UI, go to the Shared/MainLayout.razor component and keep only the @Body property:

@inherits LayoutComponentBase
@Body
  1. Go to the Home route located under the Pages/Index.razor file, and replace the contents of the file with the following:

@page "/"
@inject IJSRuntime JS

<div id='container' style='background: gray; width: 100vw; height: 100vh; margin: 0 auto;'></div>

@code {

    protected override async void OnAfterRender(bool firstRender)
    {
      if (firstRender) {
        await JS.InvokeVoidAsync("loadPDF", "#container", "document.pdf");
      }
    }
}
  1. 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

  1. Start the app in the root directory of your project:

dotenv watch run

Next Steps

Integrate into a Blazor WebAssembly 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

  1. Open Visual Studio and select New Solution in the File > New Solution… menu to create a new project for your application:

visual-studio-new-solution

  1. Choose the Blazor WebAssembly App project template:

visual-studio-template

  1. Choose .NET 5.0 for the target framework:

visual-studio-template

  1. When prompted, choose your app name (PSPDFKit_BlazorWASM) and use the default options:

visual-studio-project-name

  1. 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.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s wwwroot folder.

  3. Make sure your wwwroot folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

Displaying a PDF

  1. 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.

  2. To clean out the UI, go to the Shared/MainLayout.razor component and keep only the @Body property:

@inherits LayoutComponentBase
@Body
  1. Go to the Home route located under the Pages/Index.razor file, and replace the contents of the file with the following:

@page "/"
@inject IJSRuntime JS

<div id='container' style='background: gray; width: 100vw; height: 100vh; margin: 0 auto;'></div>

@code {

    protected override async void OnAfterRender(bool firstRender)
    {
      if (firstRender) {
        await JS.InvokeVoidAsync("loadPDF", "#container", "document.pdf");
      }
    }
}
  1. 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

  1. Select Run > Start Debugging. This will start your app and open it in your default browser.

Next Steps

Integrate into a Blazor WebAssembly 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

Creating a New Project

  1. Create a new Blazor project:

dotnet new blazorwasm -o PSPDFKit_BlazorWASM
  1. Change to the created project directory:

cd PSPDFKit_BlazorWASM

Adding PSPDFKit

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s wwwroot folder.

  3. Make sure your wwwroot folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

Displaying a PDF

  1. 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.

  2. To clean out the UI, go to the Shared/MainLayout.razor component and keep only the @Body property:

@inherits LayoutComponentBase
@Body
  1. Go to the Home route located under the Pages/Index.razor file, and replace the contents of the file with the following:

@page "/"
@inject IJSRuntime JS

<div id='container' style='background: gray; width: 100vw; height: 100vh; margin: 0 auto;'></div>

@code {

    protected override async void OnAfterRender(bool firstRender)
    {
      if (firstRender) {
        await JS.InvokeVoidAsync("loadPDF", "#container", "document.pdf");
      }
    }
}
  1. 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

  1. Start the app in the root directory of your project:

dotenv watch run

Next Steps

Integrate into a jQuery 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.

Requirements

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.

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:

cp -R ./node_modules/pspdfkit/dist/ ./assets/
  1. Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Integrating into Your Project

  1. 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.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Add the jQuery CDN to your HTML page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  1. Include pspdfkit.js in your HTML page:

<script src="assets/pspdfkit.js"></script>
  1. Initialize PSPDFKit for Web in jQuery by calling PSPDFKit.load():

<script>
  PSPDFKit.load({
    container: '#pspdfkit',
    document: 'Document.pdf',
  })
    .then(function (instance) {
      console.log('PSPDFKit loaded', instance);
    })
    .catch(function (error) {
      console.error(error.message);
    });
</script>

Here’s the full index.html file:

<!DOCTYPE html>
<html lang="en">
  <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>PDF Viewer in jQuery</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh"></div>

    <!-- Google jQuery CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="assets/pspdfkit.js"></script>

    <script>
      PSPDFKit.load({
        container: '#pspdfkit',
        document: 'Document.pdf',
      })
        .then(function (instance) {
          console.log('PSPDFKit loaded', instance);
        })
        .catch(function (error) {
          console.error(error.message);
        });
    </script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Next Steps

Integrate into a jQuery 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.

Requirements

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.

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web distribution to the assets directory in your project’s folder:

cp -R ./node_modules/pspdfkit/dist/ ./assets/
  1. Make sure your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Integrating into Your Project

  1. 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.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Add the jQuery CDN to your HTML page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  1. 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);
  });
  1. 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.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Next Steps

Integrate into a jQuery 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.

Requirements

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.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Integrating into Your Project

  1. 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.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Add the jQuery CDN to your HTML page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  1. Include pspdfkit.js in your HTML page:

<script src="assets/pspdfkit.js"></script>
  1. Initialize PSPDFKit for Web in jQuery by calling PSPDFKit.load():

<script>
  PSPDFKit.load({
    container: '#pspdfkit',
    document: 'Document.pdf',
  })
    .then(function (instance) {
      console.log('PSPDFKit loaded', instance);
    })
    .catch(function (error) {
      console.error(error.message);
    });
</script>

Here’s the full index.html file:

<!DOCTYPE html>
<html lang="en">
  <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>PDF Viewer in jQuery</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh"></div>

    <!-- Google jQuery CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="assets/pspdfkit.js"></script>

    <script>
      PSPDFKit.load({
        container: '#pspdfkit',
        document: 'Document.pdf',
      })
        .then(function (instance) {
          console.log('PSPDFKit loaded', instance);
        })
        .catch(function (error) {
          console.error(error.message);
        });
    </script>
  </body>
</html>

Serving Your Website

You’ll use the npm serve package as a simple HTTP server.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Next Steps

Integrate into a jQuery 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.

Requirements

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.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Integrating into Your Project

  1. 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.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Add the jQuery CDN to your HTML page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  1. 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);
  });
  1. 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.

  1. Install the serve package:

yarn global add serve
npm install --global serve
  1. Serve the contents of the current directory:

serve -l 8080 .
  1. Navigate to http://localhost:8080 to view the website.

Next Steps

Integrate into a PHP 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

  • PHP

We recommend installing PHP via Homebrew, as explained here.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Integrating into Your Project

  1. 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.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Include pspdfkit.js in your PHP page:

<script src="assets/pspdfkit.js"></script>
  1. Initialize PSPDFKit for Web in PHP by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
  		document: "document.pdf"
	})
	.then(function(instance) {
		console.log("PSPDFKit loaded", instance);
	})
	.catch(function(error) {
		console.error(error.message);
	});
</script>

Here’s the full index.php file (which is just a plain HTML file):

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
 		<!-- Element where PSPDFKit will be mounted. -->
		<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
		<script src="assets/pspdfkit.js"></script>
		<script>
			PSPDFKit.load({
				container: "#pspdfkit",
				document: "document.pdf",
			})
			.then(function(instance) {
				console.log("PSPDFKit loaded", instance);
			})
			.catch(function(error) {
				console.error(error.message);
			});
		</script>
	</body>
</html>

Serving Your Website

  1. Go to your terminal and run a server with this command:

php -S 127.0.0.1:8000
  1. Navigate to http://127.0.0.1:8000 to view the website.

Next Steps

Integrate into a PHP 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.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive and copy the entire contents of its dist folder to your project’s assets folder.

  3. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  4. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Integrating into Your Project

  1. 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.

  2. Add an empty <div> element with a defined width and height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
  1. Include pspdfkit.js in your PHP page:

<script src="assets/pspdfkit.js"></script>
  1. Initialize PSPDFKit for Web in PHP by calling PSPDFKit.load():

<script>
	PSPDFKit.load({
		container: "#pspdfkit",
  		document: "document.pdf"
	})
	.then(function(instance) {
		console.log("PSPDFKit loaded", instance);
	})
	.catch(function(error) {
		console.error(error.message);
	});
</script>

Here’s the full index.php file (which is just a plain HTML file):

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
 		<!-- Element where PSPDFKit will be mounted. -->
		<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
		<script src="assets/pspdfkit.js"></script>
		<script>
			PSPDFKit.load({
				container: "#pspdfkit",
				document: "document.pdf",
			})
			.then(function(instance) {
				console.log("PSPDFKit loaded", instance);
			})
			.catch(function(error) {
				console.error(error.message);
			});
		</script>
	</body>
</html>

Serving Your Website

  1. Go to your terminal and run a server with this command:

php -S 127.0.0.1:8000
  1. Navigate to http://127.0.0.1:8000 to view the website.

Next Steps

Integrate into a Laravel 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

To get started, you’ll need:

You can install PHP via XAMPP, MAMP, or Homebrew.

Don’t forget to add composer to your path directory:

export PATH="$HOME/.composer/vendor/bin:$PATH"

Creating the Project

  1. Create a new Laravel project:

laravel new pspdfkit-app
  1. 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 installed as an npm module.

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web distribution to the /public/assets/ directory in your project’s folder:

mkdir public/assets && cp -R ./node_modules/pspdfkit/dist/ ./public/assets/
  1. Make sure your /public/assets/ directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. Navigate to the resources/views/welcome.blade.php file.

  3. Add an empty <div> element with a defined height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="height: 100vh"></div>
  1. Include pspdfkit.js on the welcome.blade.php page:

<script src="assets/pspdfkit.js"></script>
  1. 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) :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
 		<!-- Element where PSPDFKit will be mounted. -->
		<div id="pspdfkit" style="height: 100vh"></div>

		<script src="assets/pspdfkit.js"></script>

		<script>
			PSPDFKit.load({
				container: "#pspdfkit",
				document: "document.pdf",
			})
			.then(function(instance) {
				console.log("PSPDFKit loaded", instance);
			})
			.catch(function(error) {
				console.error(error.message);
			});
		</script>
	</body>
</html>
  1. You can see the file structure of changed files:

pspdfkit-app
├── public
│   ├── assets
│   │   ├── modern
│   │   ├── pspdfkit-lib
│   │   ├── pspdfkit.js
│   └── document.pdf
├── resources
│   ├── views
│   |   └── welcome.blade.php

Viewing Your Website

  1. Go to your terminal and run a server with this command:

php artisan serve
  1. Navigate to http://127.0.0.1:8000 to view the website.

Next Steps

Integrate into a Laravel 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.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be installed as an npm module.

  1. Add the PSPDFKit dependency:

yarn add pspdfkit
npm install pspdfkit
  1. Copy the PSPDFKit for Web distribution to the /public/assets/ directory in your project’s folder:

mkdir public/assets && cp -R ./node_modules/pspdfkit/dist/ ./public/assets/
  1. Make sure your /public/assets/ directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  2. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. Navigate to the resources/views/welcome.blade.php file.

  3. Add an empty <div> element with a defined height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="height: 100vh"></div>
  1. Include pspdfkit.js on the welcome.blade.php page:

<script src="assets/pspdfkit.js"></script>
  1. 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) :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
 		<!-- Element where PSPDFKit will be mounted. -->
		<div id="pspdfkit" style="height: 100vh"></div>

		<script src="assets/pspdfkit.js"></script>

		<script>
			PSPDFKit.load({
				container: "#pspdfkit",
				document: "document.pdf",
			})
			.then(function(instance) {
				console.log("PSPDFKit loaded", instance);
			})
			.catch(function(error) {
				console.error(error.message);
			});
		</script>
	</body>
</html>

Viewing Your Website

  1. Go to your terminal and run a server with this command:

php artisan serve
  1. Navigate to http://127.0.0.1:8000 to view the website.

Next Steps

Integrate into a Laravel 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

To get started, you’ll need:

You can install PHP via XAMPP, MAMP, or Homebrew.

Don’t forget to add composer to your path directory:

export PATH="$HOME/.composer/vendor/bin:$PATH"

Creating the Project

  1. Create a new Laravel project:

laravel new pspdfkit-app
  1. 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.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive to your computer.

  3. Create a new directory under public called assets and copy the entire contents of its dist folder to your project’s public/assets folder.

  4. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  5. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. Navigate to the resources/views/welcome.blade.php file.

  3. Add an empty <div> element with a defined height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="height: 100vh"></div>
  1. Include pspdfkit.js on the welcome.blade.php page:

<script src="assets/pspdfkit.js"></script>
  1. 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) :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
 		<!-- Element where PSPDFKit will be mounted. -->
		<div id="pspdfkit" style="height: 100vh"></div>

		<script src="assets/pspdfkit.js"></script>

		<script>
			PSPDFKit.load({
				container: "#pspdfkit",
				document: "document.pdf",
			})
			.then(function(instance) {
				console.log("PSPDFKit loaded", instance);
			})
			.catch(function(error) {
				console.error(error.message);
			});
		</script>
	</body>
</html>
  1. You can see the file structure of changed files:

pspdfkit-app
├── public
│   ├── assets
│   │   ├── modern
│   │   ├── pspdfkit-lib
│   │   ├── pspdfkit.js
│   └── document.pdf
├── resources
│   ├── views
│   |   └── welcome.blade.php

Viewing Your Website

  1. Go to your terminal and run a server with this command:

php artisan serve
  1. Navigate to http://127.0.0.1:8000 to view the website.

Next Steps

Integrate into a Laravel 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.

Adding to Your Project

PSPDFKit for Web library files are distributed as an archive that can be extracted manually.

  1. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-2022.4.2.tar.gz to your computer.

  2. Once the download is complete, extract the archive to your computer.

  3. Create a new directory under public called assets and copy the entire contents of its dist folder to your project’s public/assets folder.

  4. Make sure your assets folder contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.

  5. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the Troubleshooting section.

Displaying a PDF

  1. 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.

  2. Navigate to the resources/views/welcome.blade.php file.

  3. Add an empty <div> element with a defined height to where PSPDFKit will be mounted:

<div id="pspdfkit" style="height: 100vh"></div>
  1. Include pspdfkit.js on the welcome.blade.php page:

<script src="assets/pspdfkit.js"></script>
  1. 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) :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
 		<!-- Element where PSPDFKit will be mounted. -->
		<div id="pspdfkit" style="height: 100vh"></div>

		<script src="assets/pspdfkit.js"></script>

		<script>
			PSPDFKit.load({
				container: "#pspdfkit",
				document: "document.pdf",
			})
			.then(function(instance) {
				console.log("PSPDFKit loaded", instance);
			})
			.catch(function(error) {
				console.error(error.message);
			});
		</script>
	</body>
</html>

Viewing Your Website

  1. Go to your terminal and run a server with this command:

php artisan serve
  1. Navigate to http://127.0.0.1:8000 to view the website.

Next Steps

Integrate into a PWA Project

In this guide, you’ll configure your PSPDFKit project for deployment as a progressive web app (PWA).

It will tick the majority of the boxes of the baseline PWA checklist. We’ve already built a more advanced implementation of this example, which you can try live on our website.

If you’ve never heard about PWAs and want to find out more about them, we highly recommend you check out the dedicated site from Google. You can also read our blog post on PWAs.

Prerequisites

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);

  return function() {
    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.

In case you’re not familiar with service workers, we highly recommend you read this excellent introductory blog post.

Now, create the ./serviceWorker.js file:

/* ./serviceWorker.js */

console.log("Hello from the Service Worker");

Then, register it in your application shell:

<!-- ./src/index.html -->

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
      />
      <title>PSPDFKit PWA</title>

+      <script>
+        if ('serviceWorker' in navigator) {
+          window.addEventListener('load', function () {
+            navigator.serviceWorker.register('./serviceWorker.js')
+          })
+        }
+      </script>

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!

Chrome Developers Tools: Application Tab. Shows the registered Service Worker.

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:

touch ./src/manifest.json
{
  "name": "PSPDFKit for Web PWA",
  "short_name": "PSPDFKit",
  "icons": [
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#0089AA",
  "theme_color": "#0089AA"
}

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:

Manifest file in the 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: