Integrate WebViewer into Electron Project

This sample shows how to integrate WebViewer into an Electron project to create a desktop application.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in GitHub.

1const viewerElement = document.getElementById("viewer");
2
3const openFileBtn = document.getElementById("open");
4const saveFileBtn = document.getElementById("save");
5
6WebViewer(
7 {
8 path: "../lib/webviewer",
9 initialDoc: "https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf",
10 },
11 viewerElement
12).then((instance) => {
13 // Interact with APIs here.
14 instance.UI.setTheme('dark');
15 instance.UI.disableElements(['downloadButton']);
16
17 const { documentViewer, annotationManager } = instance.Core;
18
19 openFileBtn.onclick = async () => {
20 const filePath = await window.electronAPI.openFile();
21 if (!filePath) {
22 return;
23 }
24 instance.UI.loadDocument(filePath);
25 };
26
27 saveFileBtn.onclick = async () => {
28 const doc = documentViewer.getDocument();
29 const xfdfString = await annotationManager.exportAnnotations();
30 const data = await doc.getFileData({
31 // saves the document with annotations in it
32 xfdfString,
33 });
34 const arr = new Uint8Array(data);
35
36 window.electronAPI.saveFile(arr);
37 };
38});
39

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales