本文详解 JavaScript 中通过 Ajax 获取 PDF 二进制流并创建有效 Blob 对象的关键要点，重点解决因 responseType 配置错误导致生成空白 PDF 的常见 Bug。
本文详解 javascript 中通过 ajax 获取 pdf 二进制流并创建有效 blob 对象的关键要点，重点解决因 `responsetype` 配置错误导致生成空白 pdf 的常见 bug。
在 Web 前端与后端（如 Java/AEM）协作生成 PDF 下载功能时，一个高频且隐蔽的问题是：前端下载的 PDF 文件看似正常，但实际打开为空白页或提示“无法打开文档”。根本原因往往不是后端返回的数据有误，而是前端未以正确的二进制格式接收响应——即 XMLHttpRequest 的 responseType 未显式设置为 'arraybuffer'。
当 responseType 缺失或默认为 'text'（或 'json'）时，jQuery 的 $.ajax 会尝试将原始二进制 PDF 流按 UTF-8 字符串解析，造成严重数据损坏（如字节截断、乱码替换），最终 new Blob([data], {type: 'application/pdf'}) 实际封装的是被污染的字符串而非原始字节，因此生成的 PDF 文件虽存在，却无法渲染。
✅ 正确做法是：强制指定 xhrFields.responseType = 'arraybuffer'，确保 success 回调中接收到的是未经编码转换的原始 ArrayBuffer（或 Uint8Array），再直接传入 Blob 构造函数：
sendServletDownload: function (title, path) {
const url = "myurl.pdf";
$.ajax({
url: url,
type: 'GET',
data: { path: path },
success: function (data) {
// ✅ data 是 ArrayBuffer 类型，可直接用于 Blob
const blob = new Blob([data], { type: 'application/pdf' });
const objectUrl = window.URL.createObjectURL(blob);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = objectUrl;
downloadLink.download = title + '.pdf';
downloadLink.click();
// ✅ 及时释放内存引用
window.URL.revokeObjectURL(objectUrl);
},
error: function (xhr, status, error) {
console.error("PDF download failed:", error);
},
// ⚠️ 关键配置：必须显式声明 responseType
xhrFields: {
responseType: 'arraybuffer'
}
});
}
? 注意事项：
- 不要对 arraybuffer 类型的 data 进行 atob()、decodeURIComponent() 或字符串拼接等操作——这会破坏二进制完整性；
- 若使用原生 fetch()，应改用 response.arrayBuffer() 而非 response.text()；
- 后端需确保正确设置响应头：Content-Type: application/pdf 和 Content-Disposition: attachment; filename="xxx.pdf"，并避免额外输出（如空格、BOM）；
- 在调试时，可用 console.log(data.byteLength) 验证接收到的字节数是否与后端原始 PDF 文件大小一致。
总结：Blob 创建 PDF 失败的核心陷阱在于数据类型错配。只要确保前端以 arraybuffer 形式接收、原样封装，即可 100% 还原服务端下发的 PDF 二进制内容，彻底规避“空 PDF”问题。
