首页 >web前端 >js教程 >如何跨浏览器从 JavaScript 中的二进制 Web 服务响应生成 PDF?

如何跨浏览器从 JavaScript 中的二进制 Web 服务响应生成 PDF?

Barbara Streisand
Barbara Streisand原创
2024-10-26 21:33:29466浏览

How to Generate a PDF from a Binary Web-Service Response in JavaScript Across Browsers?

使用 JavaScript 从二进制 Web 服务响应构建 PDF

背景:

这个问题解决了从通过 Ajax 请求检索的二进制字符串生成 PDF 文件的挑战。提供的二进制流由 PDF 标头和内容组成。虽然 data-uri 方法在某些浏览器中有效,但在 Internet Explorer 9 和 Firefox 中失败。

问题:

问题在于寻找跨浏览器允许从二进制响应构建 PDF 文件而不依赖于编辑 Web 服务实现的解决方案。

解决方案:

要解决此问题,以下方法是建议:

利用 Blob 和下载属性:

通过将 XMLHttpRequest 对象的 responseType 设置为“blob”,响应将作为 Blob 对象接收。该 Blob 代表 PDF 文件。随后,您可以使用 createObjectURL 方法创建下载链接,以允许用户下载 PDF。

为了演示此解决方案,可以使用以下代码片段:

<code class="javascript">var request = new XMLHttpRequest();
request.open("GET", "/path/to/pdf", true); 
request.responseType = "blob";
request.onload = function (e) {
    if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        // create `objectURL` of `this.response` : `.pdf` as `Blob`
        var file = window.URL.createObjectURL(this.response);
        var a = document.createElement("a");
        a.href = file;
        a.download = this.response.name || "detailPDF";
        document.body.appendChild(a);
        a.click();
        // remove `a` following `Save As` dialog, 
        // `window` regains `focus`
        window.onfocus = function () {                     
          document.body.removeChild(a)
        }
    };
};
request.send();</code>

优点:

此方法具有以下优点:

  • 兼容所有主流浏览器,包括 IE9、Firefox、Opera、Chrome 和 Safari
  • 避免了某些浏览器中 data-uri 方法遇到的缺陷
  • 允许用户方便地下载 PDF 文件

以上是如何跨浏览器从 JavaScript 中的二进制 Web 服务响应生成 PDF?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn