Question posted in
You can find the official documentation here.

Display PDF from Binary Data Jquery – Jquery ajax

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.

enter image description here

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.
enter image description here

Tags:

2

Answers


  1. 0

    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();
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search