Open a document from Base64

Opening a document in WebViewer from base64 data

If you have the file data as a base64 string, the best way to load the document in WebViewer is to first convert it to a Blob and then load it as described for Blobs. Below is some example code showing how to convert base64 to a Blob.

JavaScript (SDK v8.0+)

function base64ToBlob(base64) {
  const binaryString = window.atob(base64);
  const len = binaryString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; ++i) {
    bytes[i] = binaryString.charCodeAt(i);
  }

  return new Blob([bytes], { type: 'application/pdf' });
};

WebViewer(...)
  .then(instance => {
    // `myBase64String` is your base64 data which can come
    // from sources such as a server or the filesystem
    instance.UI.loadDocument(base64ToBlob(myBase64String), { filename: 'myfile.pdf' });

    const { documentViewer } = instance.Core;
    documentViewer.addEventListener('documentLoaded', () => {
      // perform document operations
    });
  });

UI.loadDocument

JavaScript (SDK v6.0+)

function base64ToBlob(base64) {
  const binaryString = window.atob(base64);
  const len = binaryString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; ++i) {
    bytes[i] = binaryString.charCodeAt(i);
  }

  return new Blob([bytes], { type: 'application/pdf' });
};

WebViewer(...)
  .then(instance => {
    // `myBase64String` is your base64 data which can come
    // from sources such as a server or the filesystem
    instance.loadDocument(base64ToBlob(myBase64String), { filename: 'myfile.pdf' });

    const { docViewer } = instance;
    docViewer.on('documentLoaded', () => {
      // perform document operations
    });
  });

WebViewerInstance.loadDocument

Loading Options

WebViewer provides various options to load a document. Whether you are loading a document through the initialDoc option in the constructor or calling loadDocument after mounting, you can always provide options to load your document.