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.

JavaScript

render.js

const viewerElement = document.getElementById("viewer");

const openFileBtn = document.getElementById("open");
const saveFileBtn = document.getElementById("save");

WebViewer(
  {
    path: "../lib/webviewer",
    initialDoc: "https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf",
  },
  viewerElement
).then((instance) => {
  // Interact with APIs here.
  instance.UI.setTheme('dark');
  instance.UI.disableElements(['downloadButton']);

  const { documentViewer, annotationManager } = instance.Core;

  openFileBtn.onclick = async () => {
    const filePath = await window.electronAPI.openFile();
    if (!filePath) {
      return;
    }
    instance.UI.loadDocument(filePath);
  };

  saveFileBtn.onclick = async () => {
    const doc = documentViewer.getDocument();
    const xfdfString = await annotationManager.exportAnnotations();
    const data = await doc.getFileData({
      // saves the document with annotations in it
      xfdfString,
    });
    const arr = new Uint8Array(data);

    window.electronAPI.saveFile(arr);
  };
});

View the full sample on GitHub