Base64 representing PDF to blob - JavaScript

Question

I have a Base64 string representing a PDF file. I want to convert it to a file with the Blob object using javascript. After it's done i want to save the blob as a PDF file using FileSaver.js.

Here is my code:

var base64PDF = JVBERi0xLjQNCiW0t..; // This is a huge string.
var blob = new Blob([base64PDF], { type: 'application/pdf' });
saveAs(blob, "test.pdf");

This code doesn't work. It saves a test.pdf that says it can't open this pdf because there was en error in the decoding.

I've also tried to do this:

var base64PDF = JVBERi0xLjQNCiW0t..; // This is a huge string.
var decode = atob(screen.prp_wcfria_ExternalFile.pdfFile);
var blob = new Blob([decode], { type: 'application/pdf' });
saveAs(blob, "test.pdf");

This code also doesn't work. How do i do this?

Scoundrelly

Possible duplicate of Creating a Blob from a base64 string in JavaScript – Footslog

Answer 1

This javascript converts a base64 string to a blob object:

// base64 string
var base64str = result.pdf;

// decode base64 string, remove space for IE compatibility
var binary = atob(base64str.replace(/\s/g, ''));
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
    view[i] = binary.charCodeAt(i);
}

// create the blob object with content-type "application/pdf"               
var blob = new Blob( [view], { type: "application/pdf" });
var url = URL.createObjectURL(blob);

Cutworm

Great answer, but you should include an explanation of why like @Musa below. Together you guys have the perfect answer. – Goda

Pretty easy. Thanks!! – Radiothermy

Answer 2

You have to convert the base64 string back into the original binary data. Using atob is not sufficient, you'll have to run it through a loop and convert it to an array buffer - Convert base64 string to ArrayBuffer
Then use that to create the blob.

Pesthole

Great explanation thanks! Could use an example like @Carlos includes, but together you have the perfect answer. – Goda

Answer 3

const b64toUrl = async (base64Data) => {
  const r = await fetch(base64Data);
  const blob = await r.blob();
  return URL.createObjectURL(blob);
}

base64Data string should include the "data:application/pdf;base64,...." part.

Significant

This is exactly what I needed. Could you update this to include a non-async version? Putting code in comments sucks but basically, for those of you who can't use an await for this, you will need to use the more formal promise route (fetch().then().then()) to get your url. – Tagore

Answer 4

Easiest way, use the Fetch API to convert base64 to blob.

here's the code...

    const pdfstr = await fetch(pdf);   \\pdf is the base64 string
    const blobFromFetch= await pdfstr.blob();

  
    var blob = new Blob([blobFromFetch], {type: "application/pdf"});
    
    const blobUrl = URL.createObjectURL(blob);
  

  window.open(blobUrl,"_blank");

hope it helps!

Mender

Your solution with making sure the pdf base64 string has the data:application/pdf;base64,string prepended, as suggested by Gerson Diniz answer, worked fine for me: await fetch(`data:application/pdf;base64,${pdf}`); – Openandshut