使用Axios下载二进制文件异常：PDF内容不符，数据未保存至文件

我之前也踩过这个一模一样的坑！用Axios下载PDF后打开要么乱码，要么内容完全不符合预期，本质上都是二进制数据被错误解析或处理导致的，主要有这几个常见原因和对应的解决办法：

1. 未设置正确的responseType #

Axios默认会把响应数据按JSON格式解析，这对二进制文件来说完全是灾难——它会把原始二进制字节当成UTF-8字符串处理，直接破坏了文件的原始数据结构。

必须在请求配置里明确指定responseType为'blob'或'arraybuffer'，告诉Axios要保留原始的二进制数据：

// 示例：下载PDF的GET请求
axios.get('/your-pdf-download-url', {
  responseType: 'blob' // 推荐用blob，更适合文件处理；arraybuffer也能满足需求
})

2. 错误处理响应数据 #

拿到响应后，千万别把response.data转成字符串再写入文件！比如下面这种写法绝对会出问题：

// ❌ 错误示例：把二进制数据转成字符串写入
fs.writeFile('output.pdf', response.data.toString(), (err) => { ... })

正确的做法是直接使用原始的Blob/ArrayBuffer数据，根据运行环境选择对应的处理方式：

Node.js环境下写入文件 #

需要把Blob转成Buffer再写入：

const fs = require('fs/promises');

axios.get('/your-pdf-download-url', { responseType: 'blob' })
  .then(async (response) => {
    // 把Blob转为Buffer
    const buffer = Buffer.from(await response.data.arrayBuffer());
    await fs.writeFile('output.pdf', buffer);
    console.log('PDF文件保存成功！');
  })
  .catch(err => console.error('下载失败:', err));

浏览器环境下触发下载 #

通过创建Blob URL生成下载链接：

axios.get('/your-pdf-download-url', { responseType: 'blob' })
  .then(response => {
    const blob = new Blob([response.data], { type: 'application/pdf' });
    const downloadUrl = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = 'your-target-file.pdf';
    document.body.appendChild(a);
    a.click();
    // 清理临时资源
    window.URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(a);
  });

3. 服务器响应头异常（次要但需注意） #

如果服务器返回的Content-Type不是application/pdf（比如错误设成了text/plain），虽然客户端强制设置responseType一般能覆盖这个问题，但还是建议检查服务器配置，确保响应头正确：

Content-Type: application/pdf
Content-Disposition: attachment; filename="your-target-file.pdf"

总结 #

核心就是让Axios保留原始二进制数据，不要做多余的文本解析，然后用对应环境的正确方式把二进制数据写入文件。只要把responseType设置对，再用Blob/Buffer处理数据，问题基本就能解决。

内容的提问来源于stack exchange，提问作者Anton Pelykh