sapui5 encoded base64 string to pdf

Question

I have a base64 string and I want to convert it to a PDF file. I am using the SAP UI5 framework. I already tried it with atob(), but the pdf does not open. Any suggestions how to do that? BR, ajsnub

Here is my coding:

onClick: function(oEvent) {
                var base64 = "JVBERi0xLjUNCi...." //shortend

                var sDecodedFile = window.atob(base64);
                var sFileName = "test.pdf"

                var saveData = (function() {
                    var a = document.createElement("a");
                    document.body.appendChild(a);
                    a.style = "display: none";

                    return function(data, fileName) {
                        var json = JSON.stringify(data),
                            blob = new Blob([json], {
                                type: "data:application/pdf;base64"
                            }),
                            url = window.URL.createObjectURL(blob);
                        a.href = url;
                        a.download = fileName;
                        a.click();
                        window.URL.revokeObjectURL(url);
                    };
                }());

                var data = sDecodedFile,
                    fileName = sFileName;

                saveData(data, fileName);

            }

Update with jsPDF:

var base64 = "JVBERi0xLjUNCi...." //shortend                    
var doc = new jsPDF();
                    var SampleData = 'data:application/pdf;base64,' + base64;
                    //doc.image(SampleData, 10, 10);
                    doc.save('test_document.pdf');

Possible duplicate of [SAPUI5/Javascript How to convert binary data to readable format and Download as PDF](https://stackoverflow.com/questions/49044431/sapui5-javascript-how-to-convert-binary-data-to-readable-format-and-download-as) — Serban Petrescu, Mar 07 '18 at 15:56
Thx for the hint but the content of the PDF is still not correct as atob seems not to be sufficient. — ajsnub, Mar 07 '18 at 17:17
If the base64 string is indeed a base64 encoded PDF file, then it must be sufficient. I suspect that your base64 string is either something else or it has been encoded wrongly. What is the output of the atob? Normally you should be able to see some PDF-specific headers in there. — Serban Petrescu, Mar 08 '18 at 04:53
Hi Serban, yes I see something like: %PDF-1.3 %ª«¬4 0 obj << /Type /Info /Producer (null) >> endobj 5 0 obj << /Length 2070 /Filter /FlateDecode >> stream xoeÍX[oÛÊ~×¯àKı°è½’Ë¼Y–dû8q\[Ž•ÔE±’Va^tHêäÔ¿¾³”ÅÑ¢#mQç!ZrgæÛÙ&½³1õì›,zvûdÖ#Þ²Gk Ô‹ˆ’ÐBæSª¼Iêýídbó’§Ÿ¼>äÉÐl ªr¶Jt6w/ÓéÕ'ïïÞä·wÊˇî”•‹ØÌ‹x¶r’£©)*·AaÓ — ajsnub, Mar 08 '18 at 11:49
Hi Serban, sorry, I could now succeed without any atob() operation. Just passing the base64 string in type: "data:application/pdf;base64" and it works! thanks — ajsnub, Mar 08 '18 at 14:32

score 1 · Accepted Answer · answered Mar 07 '18 at 09:24

1

Use the 'download' property of an <a> tag Here the docu

The real benefit of a[download] will be when working with blob: URLs and filesystem: URLs URLs. It'll give users a way to download content created/modified within your app.

So set up your base64 blob in the href

Review this as well: How to download PDF automatically using js?

Use sap.ui.core.HTML control to wrap your <a> tag

answered Mar 07 '18 at 09:24

Rafael López Martínez

2,225
2
15
23

Hi Rafel, I manage to download the pdf with the tag. But the pdf will not open because the adobe reader says the file is damaged. Please check my coding: – ajsnub Mar 07 '18 at 09:47
Then it is because your blob is not correct... check the url variable, setting a breakpoint or printing the value in the console... and compare it with other pdf BLOBs... – Rafael López Martínez Mar 07 '18 at 10:28
you can use jspdf for creating pdf from text – Mohammad Raheem Mar 07 '18 at 10:49
@MohammadRaheem: Ok, tried that libary jspdf and i am able to save an empty pdf. :) could you please advise how I must pass the base64 string to which jspdf function? Please see my updated code snippet in original posting. – ajsnub Mar 07 '18 at 12:12

score 0 · Answer 2 · answered Mar 07 '18 at 12:59

0

Check this ...

$(document).ready(function () {

    var base64 = "VGhpcyBpcyB0ZXh0IGZvciBwZGYgZG9j" //shortend
    var sDecodedFile = window.atob(base64);
    var doc = new jsPDF();
    doc.text(20, 20, sDecodedFile);
    doc.addPage();
    doc.text(20, 20, 'Do you like that?');

// Output as Data URI
    var datat = doc.output('datauri');
    var fileName = 'test.pdf';
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    a.href = datat;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(datat);

});

answered Mar 07 '18 at 12:59

Mohammad Raheem

1,131
1
13
23

Perfect, this works now I had to download the "standard_fonts_metrics.js" file as I got an issue with missing "widths" in the jspdf.js file. But then pdf gets generated! But I have another issue now: the pdfs looks strange with technical information of the pdf header or something like that. I guess this is due to the atob. Is there a better way to encode a base64 string? (the base64 represents an actual PDF) BR, ajsnub – ajsnub Mar 07 '18 at 14:55

sapui5 encoded base64 string to pdf

2 Answers2