Ajax POST 中文件下载的优雅处理：最佳实践指南

javascript

2024-03-21 02:35:29

在 Ajax POST 中优雅地处理文件下载

背景：

在现代 Web 应用程序中，利用 Ajax POST 请求从服务器异步获取数据已变得十分普遍。然而，当响应包含文件时，直接在客户端处理此类响应就变得棘手。本文将详细介绍在 Ajax POST 中处理文件下载的最佳实践，帮助你克服这一难题。

解决方案：

1. 设置服务器端响应头：

Content-Type： 指示文件的 MIME 类型（例如，application/pdf 或 application/octet-stream）
Content-Disposition： 指定 attachment; filename=filename.ext，提示浏览器以给定文件名下载文件

2. 客户端响应处理：

检测 Content-Type： 检查服务器响应头，如果指示文件，则进入下一步。
创建 Blob 对象： 使用 JavaScript 的 Blob() 对象，包含响应数据。
创建 URL： 利用 URL.createObjectURL() 创建指向 Blob 对象的 URL。
触发下载： 使用 window.location.href 或 <a> 元素下载文件，网址指向创建的 URL。

示例代码：

服务器端（PHP）：

header('Content-Type: application/pdf');
header('Content-Disposition: attachment; filename=myfile.pdf');
readfile('myfile.pdf');

客户端（JavaScript）：

$.ajax({
  url: 'your_url',
  method: 'POST',
  data: { ... },
  success: function(response) {
    if (response.getResponseHeader('Content-Type').indexOf('application/pdf') !== -1) {
      var blob = new Blob([response], { type: 'application/pdf' });
      var url = URL.createObjectURL(blob);
      window.location.href = url;
    }
  }
});