Convert Base64 to PDF in JavaScript: Reusable Browser Implementation

If your frontend receives a Base64 string and users need a real PDF file, JavaScript can handle the whole flow in the browser. This page is the implementation guide: build a reusable function, wire it to API responses, then preview or download the result.

TL;DR: Strip the data: prefix if present, decode with atob(), convert to Uint8Array, wrap in a Blob({ type: 'application/pdf' }), and use that function anywhere your frontend needs PDF export.

Reusable browser implementation

function base64ToPdf(base64String, fileName = 'document.pdf') {
  const cleanBase64 = base64String.replace(/^data:[^;]+;base64,/, '');
  const binary = atob(cleanBase64);
  const bytes = Uint8Array.from(binary, char => char.charCodeAt(0));
  const blob = new Blob([bytes], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.click();

  URL.revokeObjectURL(url);
}

Preview instead of download

function previewBase64Pdf(base64String) {
  const cleanBase64 = base64String.replace(/^data:[^;]+;base64,/, '');
  const binary = atob(cleanBase64);
  const bytes = Uint8Array.from(binary, char => char.charCodeAt(0));
  const blob = new Blob([bytes], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  window.open(url, '_blank');
}

Using it with an API response

const response = await fetch('/api/invoice/123');
const data = await response.json();
base64ToPdf(data.pdf, 'invoice-123.pdf');

Common problems

`atob()` throws an invalid character error

Clean the input first:

const cleanBase64 = input
  .replace(/\s+/g, '')
  .replace(/^data:[^;]+;base64,/, '');

The file downloads but opens as corrupted

Check that the input really is PDF data, not another file type encoded in Base64. Also confirm the backend did not truncate the field.

The PDF should open inline, not download

Use window.open(url) with the generated object URL, or set the URL as an <iframe> or <embed> source.

When this implementation guide is the right page

Use the browser route when:

the file arrives from an API
the user needs instant preview/download
you do not want a server round-trip
the decode is part of the UI flow

If you only need the file once, GoGood.dev Base64 Converter is still the faster option.

FAQ

Can JavaScript convert Base64 to PDF without a backend?

Yes. atob(), Uint8Array, and Blob are enough.

Do I need the full data URI?

No. Raw Base64 is enough. If a data URI prefix exists, strip it.

Why use Blob for PDFs?

Because Blob gives the browser a proper binary file object with MIME type metadata.

For production UI flows, JavaScript is the cleanest way to turn Base64 into a downloadable PDF. For one-off checks, use GoGood.dev Base64 Converter first and confirm the source data is valid.