Show Base64 Pdf Data Using Window.Open on Chrome New Version

Cannot download base64 encoded pdf displayed in chrome browser

Your actual problem is more like that you can not download content supplied via a data:-URI from a new window. Side note: the spinner can be stopped via close()-ing the document, but it does not affect the inoperational "Save as".

Two workarounds I found:

  1. Open data in the current window (the "iframe" button does that, then the document can be downloaded via right-clicking, though its name defaults to "download.pdf" in Chrome). It may be an option with short documents / small images
  2. It is possible to provide an explicit button for downloading, and in this case a filename can be supplied too. "window(tab)" button does that in the example. While generally it does not look nice that the exact same encoded data is moved around twice, it happens locally in the browser after all


<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
let pdf="JVBERi0xLjIgCjkgMCBvYmoKPDwKPj4Kc3RyZWFtCkJULyA5IFRmKFRlc3QpJyBFVAplbmRzdHJlYW0KZW5kb2JqCjQgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL1BhcmVudCA1IDAgUgovQ29udGVudHMgOSAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0tpZHMgWzQgMCBSIF0KL0NvdW50IDEKL1R5cGUgL1BhZ2VzCi9NZWRpYUJveCBbIDAgMCA5OSA5IF0KPj4KZW5kb2JqCjMgMCBvYmoKPDwKL1BhZ2VzIDUgMCBSCi9UeXBlIC9DYXRhbG9nCj4+CmVuZG9iagp0cmFpbGVyCjw8Ci9Sb290IDMgMCBSCj4+CiUlRU9G";
function doFrame(){
let frm=document.createElement("iframe");
frm.style="border-color:black";
frm.src="data:application/pdf;base64,"+pdf;
document.body.appendChild(frm);
}
function doWindow(){
let wnd=open("",Date.now());
let doc=wnd.document.open();
doc.write("<a href='data:application/pdf;base64,"+pdf+"' download='small.pdf'>Download</a><br>");
doc.write("Object<br><object type='application/pdf' data='data:application/pdf;base64,"+pdf+"'></object><br>");
doc.write("Embed<br><embed type='application/pdf' src='data:application/pdf;base64,"+pdf+"'><br>");
doc.write("IFrame<br><iframe src='data:application/pdf;base64,"+pdf+"'/>");
doc.close();
}
</script>
</head>
<body>
<button onclick="doWindow()">window(tab)</button><br>
<button onclick="doFrame()">iframe</button><br>
</body>
</html>

It's not a runnable snippet as the security sandbox here (on StackOverflow) blocks both kind of attempts.

The "window(tab)" variant opens the pdf as object, embed and iframe too, I can confirm that right-click+"Save as" in Chrome does not do anything on them. Download button works (also, in Chrome at least).

How to show Base64 image on browser's new tab?

Supposing you are going to get a GIF image:


// Display a base64 URL inside an iframe in another window.
function debugBase64(base64URL){
var win = window.open();
win.document.write('<iframe src="' + base64URL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
}

success: function (base64Image) {

// e.g This will open an image in a new window
debugBase64("data:image/gif;base64," + base64Image);

// you can try with this base64 (it is a red dot)
// debugBase64("data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=");

}

Otherwise just change data:image/gif; with the right MIME type you need.

You can find a complete list here https://www.freeformatter.com/mime-types-list.html

I found and I just tried this solution from https://ourcodeworld.com/articles/read/682/what-does-the-not-allowed-to-navigate-top-frame-to-data-url-javascript-exception-means-in-google-chrome

Display PDF in base64 in a new tab in iPad (Safari or Chrome for iOs) 2021

Seems like Safari doesn't follow the standards for the a tag. I believe this previous SO post identifies the root cause. From the comments in the linked answer:

Note that specifying a target attribute in Safari seems to override the download attribute (this does not seem to be the case in Chrome, Firefox or Opera).

Try removing '_blank' in your code above and then testing it. It should work!

Unfortunately, I'm not sure how you would open it in a new tab with that change.

how to display base64 encoded pdf?

It should work with Chrome you can use

<iframe src="data:base64...">

<object data="data:base64...">

I've faced the same issue with IE: it's impossible to display a pdf with a base64 string.

I had to generate temporary files on the server to display them with IE he only display existing file by using a path.

You still can use JS library to display your pdf like PDF.js.



Related Topics



Leave a reply



Submit