How to show PDF in browser using byte array of PDF in JavaScript?

Question

I have a controller which send the response Entity as response to AJAX call which is in byte array form of PDF.

Now I want to show that in browser but nothing works. I tried every suggestion from old Stack Overflow questions, but nothing works.

Here is my response from Spring controller:

     `  %PDF-1.4
       %����
       6 0 obj
  <</Filter/FlateDecode/Length 1983>>stream
  x�� .......... [snip rest of the output]`

Here is my AJAX code:

$(".form").submit(function(e) {
    var form = $(this);
    var url = _contextPath + "pdf/" + id;
    $.ajax({
        type: "GET",
        url: url,
        data: form.serialize(),
        datatype: "application/pdf",
        success: function(data, textStatus, jqXHR)
        {
            console.log(data);
            let pdfWindow = window.open("");
            var bb = btoa(encodeURIComponent((data.replace(/[\u00A0-\u2666]/g, function(c) {
                return '&#' + c.charCodeAt(0) + ';';
            }))));
            console.log(bb);
            var file = new Blob([bb], {type:'application/pdf'});
            console.log(file);
            var fileUrl = URL.createObjectURL(file);
            pdfWindow.document.write("<iframe width='100%' height='100%' src= '"+file+"'></iframe>");
            /*var pdfData = btoa(unescape(encodeURIComponent(data)));
            console.log(pdfData);
            var pdfDataa = atob(pdfData);
            console.log(pdfDataa);*/
           /* var bb = btoa(encodeURIComponent((data.replace(/[\u00A0-\u2666]/g, function(c) {
                return '&#' + c.charCodeAt(0) + ';';
            }))));
            console.log(bb);
            var file = new Blob([bb], {type:'application/pdf'});
            var fileUrl = URL.createObjectURL(file);
            window.open(fileUrl,'', 'height=650,width=840');*/
            //console.log(data);
        //    window.open("data:application/pdf;base64, " + data, '', 'height=650,width=840');
            /*var blob = new Blob( [data], { type: "application/pdf" });
            var fileURL = URL.createObjectURL(blob);
            var win = window.open();
            win.document.write('<iframe src="' + fileURL + '" frameborder="0"' +
                ' style="border:0; top:0px; left:0px; bottom:0px;' +
                ' right:0px; width:100%; height:100%;" allowfullscreen></iframe>')*/
           /* var datauri = 'data:application/pdf;base64,' + Base64.encode(data);
            var win = window.open();
            win.document.write('<iframe src="' + datauri + '" frameborder="0"' +
                ' style="border:0; top:0px; left:0px; bottom:0px;' +
                ' right:0px; width:100%; height:100%;" allowfullscreen></iframe>');*/
            //var base64EncodedStr = btoa(unescape(encodeURIComponent(data)));
            //window.open(data,"_blank","scrollbars=yes,resizable=yes");
            //window.open("data:application/pdf," + encodeURI(data));
           // window.open("data:application/pdf," + escape(data));
            //window.open("data:application/pdf," + base64EncodedStr);
          //  window.open("data:application/octet-stream;charset=utf-16le;base64,"+base64EncodedStr);

          //  let pdfWindow = window.open("")
           //   pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, "
           //     + blob+"'></iframe>");
          /*  const byteArray = data;
            const blob = new Blob([byteArray], {type: 'application/pdf'});
            const blobURL = URL.createObjectURL(blob);
            var win = window.open();
            win.document.write('<iframe src="' + blobURL + '" frameborder="0"' +
                ' style="border:0; top:0px; left:0px; bottom:0px;' +
                ' right:0px; width:100%; height:100%;" allowfullscreen></iframe>');*/
           /* var len = data.length;
            var buffer = new ArrayBuffer(len);
            var view = new Uint8Array(buffer);
            for (var i = 0; i < len; i++) {
                view[i] = binary.charCodeAt(i);
            }
            */
            /*var base64EncodedStr = btoa(unescape(encodeURIComponent(data.toString())));
            var pdfData = base64EncodedStr;

            var x = window.open();
            var iframe = x.document.createElement('iframe')
            iframe.width = '100%'
            iframe.height = '100%'
            iframe.frameBorder = 0
            iframe.style = "border: 0"
            iframe.src = "data:application/pdf;base64, " + pdfData
            x.document.body.appendChild(iframe);*/
           // $('.form').unbind('submit').submit();

        }
    });
    e.preventDefault();
});

It's a GET request? Then in the document <iframe id="frame"></iframe>. Then in your js var url = _contextPath + "pdf/" + id; frame.src = url;. Or even simpler <iframe url="#the_url#"></iframe> if the url is static. — Kaiido
– Kaiido, Commented Feb 7, 2019 at 7:18
form data send from ajax call so i can not directly call the url. theresponse i get is in byte array so i want to show that in browser — user
– user, Commented Feb 7, 2019 at 7:21
Why type is set to "GET" then? Well anyway, the easiest would be to directly fetch your resource as Blob (this means overriding jQuery's XHR object's responseType, then you'd just have to set an iframe's src to URL.createObjectURL(XHR.response); — Kaiido
– Kaiido, Commented Feb 7, 2019 at 7:25

ScanQR · Accepted Answer · 2022-01-24 11:04:22Z

16

Found the solution here it is, i was sending byte array from spring controller which is in the form like %PDF-1 %��. So i send base64 encoded string from spring controller and send the base64 encoded string to browser and it works.

javascript code :

var arrrayBuffer = base64ToArrayBuffer(data); //data is the base64 encoded string
function base64ToArrayBuffer(base64) {
    var binaryString = window.atob(base64);
    var binaryLen = binaryString.length;
    var bytes = new Uint8Array(binaryLen);
    for (var i = 0; i < binaryLen; i++) {
        var ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    }
    return bytes;
}
var blob = new Blob([arrrayBuffer], {type: "application/pdf"});
var link = window.URL.createObjectURL(blob);
window.open(link,'', 'height=650,width=840');

convert byte array to base64 encoded string in spring controller

String encodedString = Base64.getEncoder().encodeToString(bytearrayofpdf);

edited Jan 24, 2022 at 11:04

ScanQR

3,8202 gold badges16 silver badges34 bronze badges

answered Feb 7, 2019 at 10:48

user

4273 gold badges6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

r_zelazny Over a year ago

if we don't have access to the server, how do we convert the binary string / byte array to a base64 encoded string in javascript?

Alex78191 Over a year ago

You can just download pdf as arraybuffer or even blob stackoverflow.com/a/48086247/4854931

informatik01 · Accepted Answer · 2024-09-10 22:58:38Z

4

You can use PDFObject JavaScript utility to view PDF files in your browser. Just create a div with some id and insert the byte array that you get into that div.

PDFObject.embed(<byte array>, "#pdfObjectViewer");

You need to download the PDFObject library and include it in your project from their site for this to work. Or you can use this CDN.

edited Sep 10, 2024 at 22:58

informatik01

16.5k11 gold badges82 silver badges112 bronze badges

answered Feb 7, 2019 at 9:57

Pranav balu

1461 silver badge5 bronze badges

1 Comment

Jonesopolis Over a year ago

minor note, its not just <byte array>, you need data:application/pdf;base64,<byte array> as the first parameter

Shreya · Accepted Answer · 2023-05-12 10:17:15Z

-2

$ajax({type:get,xhr:function(){var xhr = new XMLHttpRequest()if(xhr.readyState ==2){ if(xhr.status ==200){ xhr.responseType =".blob"} else{ xhr.responseType="text" } } } return xhr }, success:function(data){ Cost blob = new Blob([data], {type:"application/pdf"}) cost url=window.URL.createObjectURL(blob) window.open(url)}})

answered May 12, 2023 at 10:17

Shreya

1

1 Comment

pierpy Over a year ago

Hi, your answer is unreadable. Please format your code: formatting help. After doing it, we can see if your code addresses the question or not. Thank you.

Collectives™ on Stack Overflow

How to show PDF in browser using byte array of PDF in JavaScript?

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related