Open local image files using JavaScript

Image

In standalone mode, sometimes you’ll want to keep a document persisted in the browser’s local storage(opens in a new tab). Since local storage only accepts data as a string, you can use Base64 to encode and decode the document storing it.

First export the document as an ArrayBuffer, and then store it as a Base64 string:

const myDocumentArrayBuffer = await instance.exportPDF();
let base64EncodedDocument = '';
const len = myDocumentArrayBuffer.byteLength;
for (let i = 0; i < len; i++) {
  base64EncodedDocument += String.fromCharCode(myDocumentArrayBuffer[i]);
}
window.localStorage.setItem('document', base64EncodedDocument);

You can load this document later by retrieving the Base64 string from local storage and passing it as a data URL in the configuration object passed to PSPDFKit.load():

const base64EncodedDocument = window.localStorage.getItem('document');
PSPDFKit.load({
  // `base64Decode` is a user function that decodes a Base64 string into an `ArrayBuffer`.
  document: `data:application/pdf;base64,${base64EncodedDocument}`
});

Now what if, instead of opening the document from local storage, you want to let the user select a file from the local file system?

Since uploaded files are received as File objects that share the Blob API, you can proceed similarly to how you do with Blob:

// `event` is an HTML change event from an <input type="file"> element.
const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
PSPDFKit.load({
  document: documentFileObjectUrl
})
  .then(instance => {
    // Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
    URL.revokeObjectURL(documentFileObjectUrl);
  });

It’s also possible to set the initial conditions of the viewer in the same configuration object by setting the initialViewState property. For example, if you want to open a document on page 2 with the thumbnails sidebar open, do it like this:

// `event` is an HTML change event from an <input type="file"> element.
const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
PSPDFKit.load({
  document: documentFileObjectUrl,
    initialViewState: new PSPDFKit.ViewState({
      pageIndex: 2,
      sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
    })
})
  .then(instance => {
    // Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
    URL.revokeObjectURL(documentFileObjectUrl);
  });

Here’s a complete example that accepts all Standalone-supported input file formats:

<html>
  <head>
    <title>Open local file system PDF</title>
    <style>
      html,
      body {
        height: 100%;
      }
      #pdfContainer {
        height: 90%;
      }
    </style>
  </head>
  <body>
    <input
      type="file"
      accept="application/pdf,image/png,image/jpeg,image/tiff"
    />
    <div id="pdfContainer"></div>
    <script
      src="/node_modules/pspdfkit/dist/pspdfkit.js"
      type="text/javascript"
    ></script>
    <script type="text/javascript">
      document.addEventListener("change", function (event) {
        if (event.target.files.length === 1) {
          const documentFileObjectUrl = URL.createObjectURL(event.target.files[0]);
          PSPDFKit.load({
            container: "#pdfContainer",
            document: documentFileObjectUrl,
            initialViewState: new PSPDFKit.ViewState({
              pageIndex: 2,
              sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
            })
          })
            .then(instance => {
              // Make sure to revoke the object URL so the browser doesn't hold on to the file object that's not needed any more.
              URL.revokeObjectURL(documentFileObjectUrl);
            });
        }
      });
    </script>
  </body>
</html>

Loading options

You can open files in any of the supported file formats.

PSPDFKit.load() also accepts different configuration options:

  • XFDF (Standalone only)

Example:

PSPDFKit.load({
  container,
  document: documentUrl,
  toolbarItems: PSPDFKit.defaultToolbarItems.filter(item => item.type !== "print"),
  initialViewState: new PSPDFKit.ViewState({
    sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS
  })
})