如何使用 JavaScript 从不同浏览器的 Web 服务响应中可靠地下载 PDF 文件？

从 JavaScript 中的 Web 服务响应构建 PDF 文档

从 Web 服务返回的二进制字符串构建 PDF 文档提出了跨浏览器的挑战。 data-uri 方法虽然在 Chrome 和 Opera 等某些浏览器中有效，但在 IE9 和 Firefox 中效果不佳。

替代方法：客户端文件下载

到为了克服这些限制，另一种方法是在文件系统上创建 PDF 文件以供用户下载。要实现此目的，请考虑以下操作：

将响应类型设置为 Blob

将 XMLHttpRequest 对象的 responseType 属性配置为“blob”而不是“text”。这允许客户端以 Blob 对象的形式接收 PDF 数据。

利用 Blob 对象

使用从 Web 服务请求获得的响应创建一个新的 Blob 对象.

生成对象 URL

为表示 PDF 文件的 Blob 对象生成对象 URL。

创建下载链接

创建 HTML 元素并设置其 href 和下载属性。 href 属性应指向对象 URL，而 download 属性指定文件名。

触发下载

将 元素附加到文档正文并单击它以启动文件下载。

示例代码

以下 JavaScript 代码演示了此方法：

<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) {
        // Generate .pdf name as `Blob` from `this.response`
        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` after `Save As` dialog
        window.onfocus = function () {
            document.body.removeChild(a);
        };
    };
};
request.send();</code>

此方法确保跨多个浏览器（包括 IE9、Firefox、Chrome、Opera 和 Safari）可靠的文件下载。

以上是如何使用 JavaScript 从不同浏览器的 Web 服务响应中可靠地下载 PDF 文件？的详细内容。更多信息请关注PHP中文网其他相关文章！