PDF base64

Ionic Framework ionic-v3
1

Hi everybody,

I’m facing a problem when Im getting a PDF in base 64, I need to download it locally but I couldn’t get it. I have saved images using this:

this.base64 = 'data:application/octet-stream;base64, '+data.json().RESPUESTA;
window.open(this.base64, ‘_blank’);

It works perfectly, but when I try with a PDF in base 64 it doesn’t work, Im getting the base 64 from the response of my server ==> data.json().RESPUESTA.

I will appreciate any help, pardon my english.

2

I had the similar issue 3 months ago, it took me 2 weeks to figure out a work around other than using that pdf.js plugin…

3

Thanks a lot for your answer

My project is gonna be a PWA so it will be deployed in a hosting, so I don’t need to draw in an native app I need to download it, will pdf.js solve that ? I mean it can download it in user’s computer?

4

I got some progress, i was using Safari browser to test my app and I found out that the browsers can block some URLs, then I tried out in Chrome browser and It worked I download the pdf, not perfectly but for now it did it.

Here is some documentation about : Block - URLs

5 
Try my workaround to open up in a new tab:

 let pdfWindow = window.open();

then
var pdf = pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + pdfbase64Data + "'></iframe>");

But the pdf doesn’t open up in the centers on the mobile browsers

6

Thanks a lot for your answer

I solved after search a lot about it.

I had to implement atob() to decode the base 64 string and it opens a new tab with the browser’s pdf view. here is the code

let file = new Blob([atob(data.json().RESPUESTA)], {type: ‘application/pdf’});
let fileURL = URL.createObjectURL(file);
window.open(fileURL);

data.JSON().RESPUESTA is the base 64 string.

Captura de pantalla 2017-12-06 a la(s) 1.09.29 p. m..png1280×737 30.8 KB

1 Like
7

Do you have the implementation for atob()? so do I just create a new class and export it then import it as a dependency in the constructor…

8

I only put it as I showed, I didn’t import I only executed it .

/metodo para descargar pdf/
pruebaPdf(){
this.rest.getPdf(this.mail).then(data=>{
if(data.json()){
this.base6 = 'data:application/pdf;base64, '+data.json().RESPUESTA;
let file = new Blob([atob(data.json().RESPUESTA)], {type: ‘application/pdf’});
let fileURL = URL.createObjectURL(file);
console.log(file);
window.open(fileURL);
}
})
}

9

I tried this way and It works perfectly, the way with atob() only works with some Data.

Thank you so much for your help

1 Like
10

Try this one https://github.com/MarouaneSH/Ionic-jsPdf-Html2Canvas