这个问题我之前也踩过坑，核心原因是Axios默认会把响应数据当作JSON或UTF-8字符串处理，而PDF这类二进制文件需要保持原始字节流，一旦被转换成字符串再反向解析，就会破坏文件的二进制结构，导致无法正常打开。

为什么直接访问链接没问题？ #

当你直接在浏览器里打开下载链接时，浏览器会自动识别响应头里的Content-Type（比如application/pdf），并以二进制形式接收完整数据，所以文件是完好的。但Axios默认的responseType是json，它会把二进制数据解码成字符串，这一步就丢失了原始的字节信息，最终导致下载的文件损坏。

解决方案：设置Axios的responseType为blob #

修改你的React客户端代码，在Axios请求中添加responseType: 'blob'配置，确保以二进制Blob对象接收响应数据：

import download from 'downloadjs'

downloadFile = (filetodownload) => {
  axios.get('http://localhost:4000/cww/download/' + filetodownload, {
    responseType: 'blob' // 关键配置：告诉Axios以二进制Blob形式接收数据
  })
  .then(res => {
    // 优化：从响应头自动获取文件名，不用硬编码
    let filename = "testfile.pdf";
    const contentDisposition = res.headers['content-disposition'];
    if (contentDisposition) {
      const filenameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
      if (filenameMatch && filenameMatch[1]) {
        filename = filenameMatch[1];
      }
    }
    // 使用响应头中的Content-Type，而非硬编码的"text/plain"
    const contentType = res.headers['content-type'] || 'application/pdf';
    download(res.data, filename, contentType);
  })
  .catch(err => {
    console.error('文件下载出错:', err);
  });
}

服务器端的优化建议（可选） #

为了让客户端更准确地处理文件，你可以在Node.js服务器中添加正确的Content-Type响应头，避免浏览器或客户端猜测文件类型：

// 先安装mime-types包：npm install mime-types
const mime = require('mime-types');

router.route("/download/:filesaveas").get(function(req, res) {
  const fileLocation = "public/files/" + req.params.filesaveas;
  const file = req.params.filesaveas;
  
  // 根据文件扩展名自动生成对应Content-Type
  const contentType = mime.lookup(fileLocation) || 'application/octet-stream';
  res.setHeader('Content-Type', contentType);

  res.download(fileLocation, file, (err) => {
    if (err) {
      console.error('下载服务出错:', err);
      res.status(500).send('无法下载文件');
    }
  });
})

这样修改后，客户端就能正确接收完整的二进制Blob数据，下载的PDF文件就不会再出现损坏无法打开的情况了。

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