How to Display Base64 Encoded Pdf

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.

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:

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
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 Display Base64 Encoded Pdf

how to display base64 encoded pdf?

Cannot download base64 encoded pdf displayed in chrome browser

Related Topics

Leave a reply