React PDF viewer

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={{ height: '750px' }}>
    <Viewer fileUrl={url} />

(The sample code)

/ 1