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?

Possible duplicate of [Creating a Blob from a base64 string in JavaScript](http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript) — Endless, Nov 17 '16 at 08:03

score 58 · Answer 1 · edited Aug 25 '17 at 00:10

58

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);

edited Aug 25 '17 at 00:10

dat3450

954
3
13
27

answered Aug 24 '17 at 22:56

Carlos Chaguendo

2,895
19
24

1

Great answer, but you should include an explanation of why like @Musa below. Together you guys have the perfect answer. – mtpultz Oct 15 '18 at 20:44

score 9 · Answer 2 · edited May 23 '17 at 11:33

9

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.

edited May 23 '17 at 11:33

Community

1
1

answered Mar 16 '16 at 14:50

Musa

96,336
17
118
137

Great explanation thanks! Could use an example like @Carlos includes, but together you have the perfect answer. – mtpultz Oct 15 '18 at 20:46

score 1 · Answer 3 · answered Dec 30 '21 at 22:41

1

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.

answered Dec 30 '21 at 22:41

Gerson Diniz

1,073
8
9

Shreya Haridas · Answer 4 · 2022-07-26T12:28:12.590

1

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!

edited Jul 26 '22 at 12:28

answered Jul 26 '22 at 12:15

Shreya Haridas

56
5

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}`);``` – Dari4sho Jul 02 '23 at 16:08

Base64 representing PDF to blob - JavaScript

4 Answers4

Linked