Example: Preview a PDF file from base 64

In this example, we will preview a PDF file from its base 64 data.

First, we convert the base 64 data to Blob:

const base64toBlob = (data: string) => {
    // Cut the prefix `data:application/pdf;base64` from the raw base 64
    const base64WithoutPrefix = data.substr('data:application/pdf;base64,'.length);

    const bytes = atob(base64WithoutPrefix);
    let length = bytes.length;
    let out = new Uint8Array(length);

    while (length--) {
        out[length] = bytes.charCodeAt(length);
    }

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

And then create a custom URL from the Blob:

// `base64String` is the given base 64 data
const blob = base64toBlob(base64String);
const url = URL.createObjectURL(blob);

Finally, we pass the custom URL to the Viewer component as usual:

<div
    style={{
        border: '1px solid rgba(0, 0, 0, 0.3)',
        height: '750px',
    }}
>
    <Viewer fileUrl={url} />
</div>

(The sample code)