从二进制数据 Jquery 显示 PDF答案

【问题标题】：Display PDF from Binary Data Jquery从二进制数据 Jquery 显示 PDF
【发布时间】：2021-04-01 18:12:22
【问题描述】：

我对二进制数据没有经验，

我正在使用 laravel，我的 pdf 文件在路径 storage/filename.pdf 中。当我以二进制数据的形式获取文件时，后端的响应是二进制数据的形式。

我想将该二进制数据输出到刀片上的 pdf 查看器，我使用 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);
    }
})

}

我已尝试将其更改为 BLOB。当我调试时，看起来 blob 包含正确的 pdf。但是当我从 blob 生成 url 并通过 URL 显示它时，pdf 文件是空白的，但 pdf 页面与原始文件匹配。

【问题讨论】：

标签： jquery ajax laravel pdf

【解决方案1】：

如果不单步执行您的代码，我很难理解发生了什么。我做过类似的事情，但是使用了一个 .pfx 文件（客户端安装的证书文件）。它也是一个二进制文件。下面是我如何向用户展示它的 sn-p。我所做的是创建一个指向资源的a 元素并使用javascript 来单击它。浏览器完成了其余的工作。 download 属性告诉浏览器下载文件，而不是尝试导航到它。不确定这是否会有所帮助，但也许它会给你一些关于如何解决这个问题的线索。我会将此作为评论发布，但它太长了。

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();

【讨论】：

【解决方案2】：

我遇到了同样的问题。我通过在将文件发送到客户端之前将文件转换为 Base64 并从浏览器对其进行解码来解决此问题，因此我得到了一个可以转换为非空白 PDF 的可读 Blob。

你可以查看我的full suggestion here。

【讨论】：