当通过 ajax 请求从后端获取 pdf 二进制流时，若未正确设置 responsetype: 'arraybuffer'，javascript 创建的 blob 将无法还原原始 pdf 内容，导致下载文件为空或损坏。本文详解问题根源与完整解决方案。
当通过 ajax 请求从后端获取 pdf 二进制流时，若未正确设置 responsetype: 'arraybuffer'，javascript 创建的 blob 将无法还原原始 pdf 内容，导致下载文件为空或损坏。本文详解问题根源与完整解决方案。
在 Web 前端开发中，通过 AJAX 下载服务端生成的 PDF 文件是一个常见需求。然而，一个极易被忽视的关键细节是：HTTP 响应数据的解析方式必须与二进制内容严格匹配。否则，即使后端返回了完全正确的 PDF 字节流（如 Java Servlet/AEM 中通过 IOUtils.copy() 正确写出），前端创建的 Blob 仍可能变成空文件或无法打开的损坏 PDF。
根本原因在于：默认情况下，jQuery 的 $.ajax() 将响应体当作字符串（UTF-8 文本）处理。而 PDF 是典型的二进制格式，包含大量非 UTF-8 兼容字节（如 0x00、0xFF 等）。若将二进制流误解析为字符串再传入 Blob([data])，JavaScript 会进行隐式编码转换，造成不可逆的数据损坏——这正是文中截图中“PDF 可视化为空白”的本质原因。
✅ 正确做法是显式声明 xhrFields: { responseType: 'arraybuffer' }，确保原生 XMLHttpRequest 以二进制形式接收响应体，并将 ArrayBuffer 直接传递给 Blob 构造函数：
sendServletDownload: function (title, path) {
const url = "myurl.pdf";
$.ajax({
url: url,
type: 'GET',
data: { path: path },
xhrFields: {
responseType: 'arraybuffer' // ✅ 关键：强制以 ArrayBuffer 接收二进制数据
},
success: function (data) {
// data 现在是 ArrayBuffer，可直接用于 Blob
const blob = new Blob([data], { type: 'application/pdf' });
const blobUrl = window.URL.createObjectURL(blob);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = blobUrl;
downloadLink.download = title + '.pdf';
downloadLink.click();
window.URL.revokeObjectURL(blobUrl); // 及时释放内存引用
},
error: function (xhr, status, error) {
console.error("PDF 下载失败:", error, "状态码:", xhr.status);
}
});
}
⚠️ 注意事项：
- 不要尝试对 arraybuffer 类型的 data 进行 atob() 或 decodeURIComponent() 等文本解码操作——这会导致数据错乱；
- 若使用 fetch() 替代 jQuery，应调用 response.arrayBuffer() 而非 response.text() 或 response.json()；
- 后端需确保响应头正确：Content-Type: application/pdf 和 Content-Disposition: attachment; filename="xxx.pdf"（如示例中的 AEM Servlet 所做）；
- 在 Blob 构造时，务必传入 [data]（数组形式），而非 data（单个 ArrayBuffer），因 Blob 构造函数接受类数组对象。
总结：解决“Blob 生成空白 PDF”问题的核心，在于前后端数据传输链路的二进制保真。前端通过 responseType: 'arraybuffer' 确保字节零失真接收，配合 Blob 的原生二进制构造，即可稳定生成可正常打开的 PDF 文件。
