React从public文件夹下载xlsx文件部署后损坏问题求助

可能的原因及对应解决方案 #

1. 文件部署路径或大小写问题 #

• 用Create React App打包时，public文件夹下的文件会被复制到build根目录，但如果部署服务器没把静态资源目录指向build，或者服务器是Linux系统（区分文件名大小写），而你本地Windows不区分，就会导致请求返回的不是真实文件（比如返回404页面的HTML，伪装成xlsx自然损坏）。
• 解决：
  • 检查服务器配置，确保静态资源根目录指向构建后的build文件夹。
  • 核对服务器build目录下的文件名，和你代码里写的完全一致（包括大小写）。

2. 服务器MIME类型配置错误 #

• 服务器没正确识别.xlsx的MIME类型，浏览器接收到的文件被错误解析，下载后就会损坏。
• 解决：
  • 给服务器添加.xlsx对应的MIME类型：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet。
  • 比如Nginx可以在http或server块里加：

    types {
        application/vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx;
    }
    

3. 打包时文件被错误处理 #

• 自定义的Webpack配置可能把xlsx这类二进制文件当成文本处理，压缩或转码后破坏了文件结构。
• 解决：
  • 用Create React App默认配置的话，它会原样复制public里的文件，别乱改配置。
  • 自定义Webpack的话，要单独配置xlsx文件的处理规则：

    module.exports = {
      module: {
        rules: [
          // 其他规则
          {
            test: /\.(xlsx)$/,
            type: 'asset/resource',
            generator: {
              filename: '[name][ext]'
            }
          }
        ]
      }
    }
    

4. 客户端路由拦截了静态文件请求 #

• 用BrowserRouter这类客户端路由时，服务器可能把所有请求都指向index.html，包括xlsx文件的请求，导致你下载的是页面HTML而非真实文件。
• 解决：
  • 配置服务器，让.xlsx这类静态文件直接返回，不经过路由。比如Nginx：

    location ~* \.(xlsx)$ {
        root /path/to/your/build;
        expires 30d;
    }
    

  • 或者换成HashRouter，避免服务器路由拦截的问题。

5. 文件上传时损坏 #

• 上传文件到服务器用了文本传输模式，篡改了xlsx的二进制数据。
• 解决：
  • 用二进制模式上传（比如FTP选binary模式，或者用scp、rsync这类默认二进制传输的工具）。
  • 重新上传文件，对比本地和服务器文件的MD5值，确认文件完整。

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