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    lt  doctype gt   lt html gt   lt head gt      lt title gt jsPDF lt  title gt      lt script type  text javascript  src     libs base64 js  gt  lt  script gt      lt script type  text javascript  src     libs sprintf js  gt  lt  script gt      lt script type  text javascript  src     jspdf js  gt  lt  script gt           lt script type  text javascript  gt           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                  lt  script gt   lt  head gt   lt body gt    lt a href  javascript demo1    gt Run Code lt  a gt    lt  body gt   lt  html gt    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

User · Answer

You should be able to download the file using  window open  data application pdf base64     Base64 encode out

User · Answer

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  lt  byteCharacters length  offset    sliceSize            var slice   byteCharacters slice offset  offset   sliceSize            var byteNumbers   new Array slice length           for  var i   0  i  lt  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

User · Answer

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  amp  amp  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

User · Answer

x000D   x000D  dataURItoBlob dataURI    x000D        const byteString   window atob dataURI   x000D        const arrayBuffer   new ArrayBuffer byteString length   x000D        const int8Array   new Uint8Array arrayBuffer   x000D        for  let i   0  i  lt  byteString length  i      x000D          int8Array i    byteString charCodeAt i   x000D          x000D        const blob   new Blob  int8Array     type   application pdf     x000D        return blob  x000D        x000D   x000D     data should be your response data in base64 format x000D   x000D  const blob   this dataURItoBlob data   x000D  const url   URL createObjectURL blob   x000D   x000D     to open the PDF in a new window x000D  window open url    blank    x000D   x000D   x000D

User · Answer

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

User · Answer

You can create an anchor like the one showed below to download the base64 pdf    lt a download pdfTitle href pdfData title  Download pdf document    gt    where pdfData is your base64 encoded pdf like  data application pdf base64 JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4 CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4IPgk23JMDQ2LB 0 2YsZAQzmZk1PSPIEB

[javascript] Save base64 string as PDF at client side with JavaScript

Examples related to javascript

Examples related to internet-explorer

Examples related to firefox

Examples related to pdf

Examples related to base64