Getting Started on Electron

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

Creating a New Project

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

yarn init -y
npm init -y
  1. Install Electron as a dev dependency:

yarn add --dev electron
npm install --save-dev electron
  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": "^11.3.0"
	},
	"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 --save pspdfkit

Displaying a PDF

  1. Add the PDF document you want to display to the assets directory. You can use our demo document as an example.

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

<!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">
	</head>
	<body>
		<!-- Element where PSPDFKit will be mounted. -->
		<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

		<script>
			// Invoke the JavaScript for the renderer process.
			require("./renderer.js");
		</script>
	</body>
</html>
  1. Load PSPDFKit in the JavaScript file of your renderer process:

const PSPDFKit = require("pspdfkit");

PSPDFKit.load({
container: "#pspdfkit",
document: `assets/Document.pdf`,
})
.then(function (instance) {
	console.log("PSPDFKit loaded", instance);
})
.catch(function (error) {
	console.error(error.message);
});
  1. Create the main JavaScript file:

const { app, BrowserWindow, protocol } = require('electron')

// Make sure to enable access to the local file system. This is required
// in order to load PDF files and PSPDFKit dependencies from the local
// file system.
protocol.registerSchemesAsPrivileged([
	{ scheme: "file", privileges: { secure: true, standard: true } }
]);

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

function createWindow () {
	mainWindow = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			nodeIntegration: true,
			enableRemoteModule: true,
			contextIsolation: false
		}
	})

	mainWindow.loadFile("index.html");

	// Emitted when the window is closed.
	mainWindow.on("closed", function() {
		// Dereference the window object to allow it to be garbage collected.
		mainWindow = null;
	});
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit()
	}
})

app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) {
		createWindow()
	}
})
  1. Your project should have the following structure now:

pspdfkit-electron-example
├── assets
|   └── Document.pdf
├── package.json
├── index.js
├── renderer.js
└── index.html
  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 --save pspdfkit

Displaying a PDF

  1. Add the PDF document you want to display to the assets directory. You can use our demo document as an example.

  2. Set up a mount target in the HTML file of your renderer process:

<!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">
	</head>
	<body>
		<!-- Element where PSPDFKit will be mounted. -->
		<div id="pspdfkit" style="width: 100%; height: 100vh;"></div>

		<script>
			// Invoke the JavaScript for the renderer process.
			require("./renderer.js");
		</script>
	</body>
</html>
  1. Load PSPDFKit in the JavaScript file of your renderer process:

const PSPDFKit = require("pspdfkit");

PSPDFKit.load({
container: "#pspdfkit",
document: `assets/Document.pdf`,
})
.then(function (instance) {
	console.log("PSPDFKit loaded", instance);
})
.catch(function (error) {
	console.error(error.message);
});
  1. Make sure you’ve enabled the file protocol in your main process:

// Enables access to the local file system. This is required in order
// to load PDF files and PSPDFKit dependencies from the local file system.
protocol.registerSchemesAsPrivileged([
	{ scheme: "file", privileges: { secure: true, standard: true } }
]);
  1. Enable node integration and remote modules, and disable context isolation. You can do this by passing an additional argument when initializing the browser window:

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

function createWindow() {
	// Create the browser window.
	mainWindow = new BrowserWindow({
		webPreferences: {
			// Enables `require()` to import modules at runtime when running on Electron.
			nodeIntegration: true,
			// Enables access to `electron.remote` from the renderer process.
			enableRemoteModule: true,
			// Enables `require()` to import modules from the renderer process.
			contextIsolation: false
		}
		// ...
	});
}
  1. Start the app:

yarn start
npm start

Next Steps