前端下载普通文件与二进制流文件

前端下载文件通常会遇到这两种情况

文件上传到资源服务器，后端只保存了文件地址，前端拿到后端返回的文件地址直接下载。
文件就存在后端服务器上（通常是临时根据前端参数动态生成，用完就删），后端读取文件后向前端返回文件的二进制流。

下面以下载 excel 文件为例，分别模拟这是这两种情况。

通过文件地址直接下载

新建一个项目，在项目中新建一个空的文件夹 service 模拟一个服务，在文件夹内新建一个 test.xlsx，然后在根目录上新建一个 index.html 模拟前端。

安装 serve 用来启动静态资源服务器。

yarn global add serve

进入 service 目录，启动服务

cd service
serve -s

此时在页面中放置一个 a 标签，并写上 download 属性，在浏览器中打开点击下载。

这种相当于一个 get 请求，浏览器直接访问该静态资源地址，download 属性告诉这个浏览器这个 a 标签不是打开页面预览而是直接下载。

这与通常在实际项目中通过 ajax 请求接口无关，只需要按照请求，因为后端返回的只是文件的地址，那到底之后绑定在 a 标签上或者通过 window.open() 都可以进行下载。

二进制流文件下载

这种情况一般就是在开发中通过 ajax 请求接口的方式，比如 post 请求，前端传递若干参数，后端返回一个二进制流。

关闭之前启动的静态服务，新建 service.js 文件，我们用 node 来写一个简单的服务。

const http = require("http");
const fs = require("fs");

const server = http.createServer((req, res) => {
  // 下载接口
  if (req.url === "/download") {
    res.writeHead(200, {
      "Content-type": "application/vnd.ms-excel", // 返回 excel
      // 跨域设置
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "content-type",
    });

    // 异步读取文件内容
    fs.readFile("test.xlsx", (err, data) => {
      // 返回二进制文件流
      res.end(data);
    });
  }
});

server.listen(3000, () => {
  console.log("Node.js server is running at port 3000!");
});

启动该服务：

node service.js

返回项目根目录，我们引入 axios 来做 ajax 请求。

yarn add axios

我们修改 index.html，移除 a 标签，替换为一个按钮，并为按钮增加点击事件：

<body>
  <button id="btn">下载</button>
</body>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
	const btn = document.getElementById("btn");

  btn.onclick = function () {
  	axios({
    	method: "post",
      url: "http://localhost:3000/download",
      data: {
      	test: "test data",
      },
    }).then((res) => {
      console.log(res.data);
    });
  };
</script>

此时点击下载，可以看到打印出来是一堆乱码。

其实原理和上面直接通过文件地址访问是一样的，现在我们的目标便是将这些二进制数据转换成一个文件 url。

我们修改一下 axios的配置：

<body>
  <button id="btn">下载</button>
</body>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
	const btn = document.getElementById("btn");

  btn.onclick = function () {
  	axios({
    	method: "post",
      url: "http://localhost:3000/download",
      data: {
      	test: "test data",
      },
      responseType: 'blob'
    }).then((res) => {
			const url = window.URL.createObjectURL(res.data);
      const a = document.createElement("a");
      a.href = url;
      a.download = "test.xlsx";
      document.body.appendChild(a);
      a.click();
      a.remove();
    });
  };
</script>

点击下载，成功转换成文件。

ps：这种转换有一个问题在于格式不一定会正确，因为是文件系统自动转换的，如果想要做到精确转换，则 responseType 使用 arraybuffer 格式，然后手动生成 blob。