真实文件下载实践：后端二进制数据下载及常见问题解析

2023-10-01 06:11:42

1. 前端代码实现

1.1 发送请求获取二进制数据

// 前端代码段
import axios from 'axios';
import { saveAs } from 'file-saver';

// 发送请求获取二进制数据
const getBinaryData = () => {
  axios({
    url: 'your_backend_url', // 替换为你的后端地址
    method: 'GET',
    responseType: 'blob', // 告诉后端返回二进制数据
  })
  .then((response) => {
    // 文件名，请自行命名
    const fileName = 'your_file_name.xls';

    // 调用file-saver库下载二进制数据
    saveAs(response.data, fileName);
  })
  .catch((error) => {
    console.log(error); // 错误处理
  });
};

// 调用函数
getBinaryData();

1.2 按钮点击事件

// 前端代码段
<button onClick={getBinaryData}>下载文件</button>

2. 后端代码实现

2.1 Node.js后端示例

// 后端代码段
const express = require('express');

const app = express();

// 处理下载请求的路由
app.get('/download', (req, res) => {
  // 这里假设你的二进制数据已经存储在名为"data.xls"的文件中
  // 实际开发中，你需要根据业务逻辑获取或生成二进制数据
  const filePath = 'path/to/data.xls';

  res.sendFile(filePath, {
    headers: {
      'Content-Type': 'application/vnd.ms-excel', // Excel文件的MIME类型
      'Content-Disposition': `attachment; filename=${filePath.split('/').pop()}`, // 设置下载文件名
    },
  });
});

app.listen(3000); // 启动服务器，你可以根据需要修改端口号

3. 常见问题及解决方案

3.1 乱码问题
- 问题下载的Excel文件打开后出现乱码。
- 解决方案： 确保后端发送二进制数据的Content-Type头设置为"application/vnd.ms-excel"。此外，在前端保存二进制数据时，请使用file-saver库提供的saveAs函数。
3.2 文件打不开问题
- 问题： 下载的文件无法打开，系统提示文件损坏或格式不正确。
- 解决方案： 确保后端发送的二进制数据完整且正确。同时，检查前端是否正确保存了二进制数据。
3.3 下载失败问题
- 问题： 点击下载按钮后，没有任何反应，下载失败。
- 解决方案： 检查前端代码中发送请求的URL是否正确。另外，确保后端服务器正在运行并可以正常处理下载请求。