Can we pass the base 64 blob?

[rchancey]

Can we use the actual pdf data blob rather than a URL?

[phuocng]

It's possible @rchancey (as you see it supports opening a local file).
I'll try to create a live demo.

[phuocng]

@rchancey
Here is the live example.

The Viewer's url could be a String or Uint8Array (which you can convert from blob to), but currently it's set as String.
I'll create another PR to update the type definition.

[phuocng]

@rchancey
You can convert base64 to Blob, and create a custom URL with URL.createObjectURL(blob):

• Convert base 64 to blob: https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript

const base64toBlob = (b64Data, contentType='', sliceSize=512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

• Create custom URL from the Blob

const blob = base64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

• Finally, pass the blobUrl to Viewer:

<Viewer fileUrl={blobUrl} />

[phuocng]

Here's the live example: https://react-pdf-viewer.dev/examples/preview-a-pdf-file-from-base-64

[phuocng]

Done.