Section:

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.

1function base64ToBlob(base64) {
2  const binaryString = window.atob(base64);
3  const len = binaryString.length;
4  const bytes = new Uint8Array(len);
5  for (let i = 0; i < len; ++i) {
6    bytes[i] = binaryString.charCodeAt(i);
7  }
8
9  return new Blob([bytes], { type: 'application/pdf' });
10};
11
12WebViewer(...)
13  .then(instance => {
14    // `myBase64String` is your base64 data which can come
15    // from sources such as a server or the filesystem
16    instance.UI.loadDocument(base64ToBlob(myBase64String), { filename: 'myfile.pdf' });
17
18    const { documentViewer } = instance.Core;
19    documentViewer.addEventListener('documentLoaded', () => {
20      // perform document operations
21    });
22  });

Related Links

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.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales