base64 string to pdf download

Question

I am facing issue to download pdf in SAPUI5 application. Issue is Getting base64 string from backend system but not able to convert it and display as PDF.

I am able to convert the base64 and download also but only small size. Not able to download for larger PDF file its downloading but shows download failed.

kindly help me out

var data =" JVBERi0xLjQNJeLjz9MNCjc1MDEgMCBvYmogPDwvTGluZWFyaXplZCAxL0wgOTM2NDM1Mi9PIDc1MDMvRSAxMjE3ODgvTiA1MjIvVCA5MjE0MjgzL0ggWyA2..";

var uri = 'data:application/pdf;base64,' + atob(data);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = object.FileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

How "small" and "large" are? What means "it's downloading but shows download failed"? (you probably mean "started to download") — Sandra Rossi, Sep 19 '19 at 07:46
convert the [base64 to a blob](https://stackoverflow.com/q/16245767/1008999) and use [object urls](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) — Endless, Sep 25 '19 at 07:35

score 2 · Answer 1 · edited Sep 19 '19 at 07:43

Saving the data as a blob and setting the download link to get the data from the blog may solve your problem for large files. The most effective way in this mechanism is to get the data from your server as binary instead of Base64. It works with base64 too - but it is just a resource over kill in the blob scenario.

var data = Uint8Array.from(atob(base64_string), c => c.charCodeAt(0));
var blob = new Blob([data], {type: "octet/stream"});

var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
...
...

score 0 · Answer 2 · answered Sep 19 '19 at 06:22

As per you current solution, a hyperlink will be created with href contains data:application/pdf;base64,' + base64Data. When the hyperlink is clicked the complete URL will be opened in the browser new tab, which makes the browser to download the PFD file.

If the base64 data is bulk then the browser will take time to download PDF. Sometimes browser will be crashed OR leads to download failed error as it takes too much of time to download.

Alternative Options

Using GET_STEAM method you can download the pdf from the backend only.
Using download plugins like downloadjs, FileSaver.js, StreamSaver.js.

As per you requirement you can get different available plugins for file downloading using client-side JavaScript

score 0 · Answer 3 · answered Sep 19 '19 at 10:31

Here is a sap blog entry solving your problem.

TLDR:

var base64EncodedPDF = "JVBERi0xLjcNCiW..."; // the encoded string
var decodedPdfContent = atob(base64EncodedPDF);
var byteArray = new Uint8Array(decodedPdfContent.length)
for(var i=0; i<decodedPdfContent.length; i++){
    byteArray[i] = decodedPdfContent.charCodeAt(i);
}
var blob = new Blob([byteArray.buffer], { type: 'application/pdf' });
var _pdfurl = URL.createObjectURL(blob);

this._PDFViewer.setSource(_pdfurl);

base64 string to pdf download

3 Answers3