Save base64 string as PDF at client side with JavaScript

Question

So here my problem: I have a pdf file as a base64 String that i am getting from the server. I would like to use this string to either display the PDF directly to the browser or give it a option of "Save as..." when clicking on a link. Here the code i am using:

<!doctype>
<html>
<head>
   <title>jsPDF</title>
   <script type="text/javascript" src="../libs/base64.js"></script>
   <script type="text/javascript" src="../libs/sprintf.js"></script>
   <script type="text/javascript" src="../jspdf.js"></script>

       <script type="text/javascript">

        function demo1() {
            jsPDF.init();
            jsPDF.addPage();
            jsPDF.text(20, 20, 'Hello world!');
            jsPDF.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');

            // Making Data URI
            var out = jsPDF.output();
            var url = 'data:application/pdf;base64,' + Base64.encode(out);

            document.location.href = url;
         }
    </script>
</head>
<body>

<a href="javascript:demo1()">Run Code</a>

</body>
</html>

Its working fine with Chrome and Safari. Firefox does recognize the pdf but does not display it as FF requires extensions to be present but the data-URI has none in this case. The reason I'm insisting here, if chrome and safari get it to work, then there has to be a solution for FF and IE

I know there are a few relevant questions to this but not really the exact one and now also a bit old ones. I know a workaround would be to have the pdf generated at server side but I would like to generate it at client side.

So please intelligent folks, is it possible through some hacks or additional JS download plugins?

hellow ??? isnt there anybody out thr who has some answer to tht .. may be john resig ;-) — owsata
– owsata, Commented Jul 11, 2012 at 7:56
@owsata, same problem here! It just opens the window! Did you find a solution to your problem? Please let us know. Thanks — Fabio Milheiro
– Fabio Milheiro, Commented Dec 13, 2012 at 18:09
@FabioMilheiro Nope didnt find anything useful. The ultimate result was that because the browsers handle the data:application idea differently there wasnt much using it in the first place. So last resort -> send a readymade pdf from the server. — owsata
– owsata, Commented Dec 20, 2012 at 13:06
Possible duplicate of Saving Base64 encoded PDF with Internet Explorer 10 and below — SanjiMika
– SanjiMika, Commented Apr 19, 2017 at 16:51
stackoverflow.com/a/16245768/7282741 This one solved my problem and saved my weekend. — Shubham
– Shubham, Commented Jun 5, 2017 at 5:30

Kamil Naja · Accepted Answer · 2025-08-17 21:36:23Z

83

you can use this function to download file from base64.

function downloadPDF(pdf) {
  const linkSource = `data:application/pdf;base64,${pdf}`;
  const downloadLink = document.createElement("a");
  const fileName = "abc.pdf";
  downloadLink.href = linkSource;
  downloadLink.download = fileName;
  downloadLink.click();
}

This code will made an anchor tag with href and download file. if you want to use button then you can call click method on your button click.

i hope this will help of you thanks

edited Aug 17 at 21:36

Kamil Naja

6,8967 gold badges38 silver badges55 bronze badges

answered Dec 16, 2019 at 8:27

adnan javed

1,51810 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

V. Bozz Over a year ago

I think it could be useful to mention that this probably does not work nowadays if there is no user interaction activity (like a real click). You still need that the user clicks on something to activate this.

V. Bozz · Accepted Answer · 2023-03-28 23:15:53Z

58

You can create an anchor like the one showed below to download the base64 pdf:

<a download="PDF Title" href="pdfData">Download PDF document</a>

where pdfData is your base64 encoded pdf like:

data:application/pdf;base64,JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4+CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4IPgk23JMDQ2LB/0+2YsZAQzmZk1PSPIEB...

edited Mar 28, 2023 at 23:15

V. Bozz

1,6321 gold badge23 silver badges42 bronze badges

answered Jan 24, 2014 at 15:55

Gabriel Cerutti

1,5271 gold badge16 silver badges17 bronze badges

3 Comments

Subinoy Over a year ago

your this information helped me to accomplished it in Salesforce Lightning, using this string you can make a file download on button click

Божидар Йовчев Over a year ago

in C# when you return a FileContentResult it keeps the file encoded in base64 however there are no indications of it and no mime type.. so in order to implement it properly in the client side I had to append data:application/pdf;base64, in front of the string and it worked!

CYB3R055 Over a year ago

this helped me avoid creating an extra backend endpoint just to download the file, thanks!!

Denys Séguret · Accepted Answer · 2012-07-10 15:03:40Z

27

You should be able to download the file using

window.open("data:application/pdf;base64," + Base64.encode(out));

edited Jul 10, 2012 at 15:03

answered Jul 10, 2012 at 14:51

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

2 Comments

owsata Over a year ago

Nope, Chrome and FF download it directly but dont assign an extension. Safari opens the PDF and displays it in browser wow. IE opens a new tab with the title "application/octet-stream" and nothing else...

Reinhard Behrens Over a year ago

I did a straight redirect using the data structure, however it needs a container or a mechanism to parse the data into a usable format (for example: an iFrame). I have not however tested this mechanism as prescribed.

Jose Rui Santos · Accepted Answer · 2022-08-30 09:29:15Z

21

function dataURItoBlob(dataURI) {
      const byteString = window.atob(dataURI);
      const arrayBuffer = new ArrayBuffer(byteString.length);
      const int8Array = new Uint8Array(arrayBuffer);
      for (let i = 0; i < byteString.length; i++) {
        int8Array[i] = byteString.charCodeAt(i);
      }
      const blob = new Blob([int8Array], { type: 'application/pdf'});
      return blob;
    }

// data should be your response data in base64 format

const blob = this.dataURItoBlob(data);
const url = URL.createObjectURL(blob);

// to open the PDF in a new window
window.open(url, '_blank');

edited Aug 30, 2022 at 9:29

Jose Rui Santos

15.3k9 gold badges61 silver badges74 bronze badges

answered Jun 15, 2020 at 15:49

Manas Sahu

92710 silver badges9 bronze badges

Comments

RiggsFolly · Accepted Answer · 2016-12-03 14:31:25Z

18

I know this question is old, but also wanted to accomplish this and came across it while looking. For internet explorer I used code from here to save a Blob. To create a blob from the base64 string there were many results on this site, so its not my code I just can't remember the specific source:

function b64toBlob(b64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 512;
    b64Data = b64Data.replace(/^[^,]+,/, '');
    b64Data = b64Data.replace(/\s/g, '');
    var byteCharacters = window.atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;

Using the linked filesaver:

if (window.saveAs) { window.saveAs(blob, name); }
    else { navigator.saveBlob(blob, name); }

edited Dec 3, 2016 at 14:31

RiggsFolly

94.7k22 gold badges108 silver badges152 bronze badges

answered Feb 17, 2015 at 10:18

Ka0s

3984 silver badges10 bronze badges

2 Comments

jrh Over a year ago

Filesaver fails in Safari also :(

Sajjad Ali Khan Over a year ago

i posted the solution on this link stackoverflow.com/questions/34436133/… which is working fine in IE , CHROME , FF . If this solution helps you , try to vote it up

Hoang Subin · Accepted Answer · 2019-11-28 02:08:07Z

You will do not need any library for this. JavaScript support this already. Here is my end-to-end solution.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'your-end-point', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.responseType = 'blob';
xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
       if (window.navigator.msSaveOrOpenBlob) {
           window.navigator.msSaveBlob(this.response, "fileName.pdf");
        } else {
           const downloadLink = window.document.createElement('a');
           const contentTypeHeader = xhr.getResponseHeader("Content-Type");
           downloadLink.href = window.URL.createObjectURL(new Blob([this.response], { type: contentTypeHeader }));
           downloadLink.download = "fileName.pdf";
           document.body.appendChild(downloadLink);
           downloadLink.click();
           document.body.removeChild(downloadLink);
        }
    }
};
xhr.send(null);

This also work for .xls or .zip file. You just need to change file name to fileName.xls or fileName.zip. This depends on your case.

rob9099 · Accepted Answer · 2024-08-13 11:47:18Z

1

This worked for me:

const downloadLink = document.createElement("a")
downloadLink.href = 'data:application/octet-stream;base64,' + yourBase64Data
downloadLink.download = "convertedPDFFile.pdf"
downloadLink.click()

answered Aug 13, 2024 at 11:47

rob9099

795 bronze badges

Comments

Denys Sokolov · Accepted Answer · 2024-10-23 10:35:10Z

You have two ways to embed PDF on the HTML page:

#1. Iframe

<iframe id="pdf_container" src="data:application/pdf;base64,JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwv..."></iframe>

#2. Embed

<embed id="pdf_container" src="data:application/pdf;base64,JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwv..."></embed>

Geted from embed PDF to HTML

I suggest using one place for "data:application/pdf;base64..." to save the page size and get data to download if needed from this place.

And JS to download content:

function download()
{
   var container = document.getElementById("pdf_container");

   var download_anchor = document.createElement("a")
   download_anchor.href = container.src; 
   download_anchor.download = "file.pdf"
   download_anchor.click();
}

Collectives™ on Stack Overflow

Save base64 string as PDF at client side with JavaScript

8 Answers 8

1 Comment

3 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

3 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Related