CODEWITHSUNDEEP
javascriptangularjsgoogle-chromepdf
Gitaram Kanawade
Gitaram Kanawade

Reputation: 351

Show base64 pdf data using window.open on chrome new version

I am using following code for open base64 data as pdf in new window

var pdf=response.data.base64;       
var doc = document.createElement("a");
doc.href ='data:application/octet-stream;base64,' + pdf;
doc.target = "blank";
doc.click();
$window.open('data:application/pdf;base64,' + pdf);

This is working fine for chrome Version 56.0.2924.87 but not working in version 61.0.3163.100 [Refer screenshot]
Sample plunker code

enter image description here

Upvotes: 6

Views: 49540

Answers (3)

harold
harold

Reputation: 201

var pdfResult = response.data.base64;
                    
let pdfWindow = window.open("")
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(pdfResult) + "'></iframe>")

this serves to display the base64 pdf in a browser tab.

Upvotes: 20

Thiago Queiroz
Thiago Queiroz

Reputation: 55

I have me too problem and my solution with my friend Petrus is:

const win = window.open("","_blank");
let html = '';

html += '<html>';
html += '<body style="margin:0!important">';
html += '<embed width="100%" height="100%" src="data:application/pdf;base64,'+base64+'" type="application/pdf" />';
html += '</body>';
html += '</html>';

setTimeout(() => {
  win.document.write(html);
}, 0);

Upvotes: 3

kleiser sarifo
kleiser sarifo

Reputation: 312

I faced similar issue using AngularJS. This is how I have managed, in my case I load the file from URL as arraybuffer. Hope it helps.

$http({
    method: 'GET',
    url: '/api/transaction-file/'+id,
    responseType:'arraybuffer'
}).then(function(response){
    var file = new Blob([response.data], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
}, function(response){
    //Error
});

Upvotes: 7

Related Questions