Display PDF from Binary Data Jquery

Question

I am not experienced with binary data,

i am using laravel, and my pdf file is in path storage/filename.pdf. when I take the file in the form of binary data, so the response from the backend is in the form of binary data.

i want to output that binary data to pdf viewer on blade, i use jquery ajax.

function showPdf(id, hash){

$.ajax({
    url:"{{ route('course-flow-content-pdf') }}",
    method:"GET",
    data:{id:id, hash:hash},
    contentType : 'application/pdf',
    responseType : 'arraybuffer',
    success:function(result){
      console.log(result);
      let blob = new Blob([unescape(encodeURIComponent(result))], {
        type : "application/pdf"
      });
      console.log(blob);
      let url = URL.createObjectURL(blob)
      console.log(url);
    }
})

}

I've tried to change it to BLOB. when i debug, it looks like the blob contains proper pdf. but when I generated the url from the blob and displayed it via the URL, the pdf file was blank but the pdf page matched the original file.

Answer 1

It's hard for me to understand what's happening without stepping through your code. I've done similar, but with a .pfx file (certificate file that client installs). It's also a binary. Below is a snippet of how I presented it to the user. What I did was create an a element that pointed to the resource and used javascript to click it. The browser did the rest. The download attribute tells the browser to download the file, instead of trying to navigate to it. Not sure if this will help, but perhaps it'll give you some clues on how to approach this. I'd post this as a comment, but it's too long.

let downloadLink = document.createElement('a');
downloadLink.setAttribute('href',url);
downloadLink.setAttribute('download','client_certificate.pfx');
document.body.appendChild(downloadLink);
//Click the link to generate the file download prompt
downloadLink.click();

Answer 2

I had the same problem. I solved this by converting the file to Base64 before sending it to the client and then decoding it from the browser, so i get a readable Blob that could be converted to a not-in-blank PDF.

You can check my full suggestion here.