一次详解，从后端导出文件到前端（Blob）下载过程

前言

对于不是从事音视频方面的同学来说，很多情况下都是通过window.location.href 来下载文件。这种方式，一般是前后端的登录态是基于Cookie+ Session 的方式，由于HTTP 请求首部字段会自动 Set-Cookie 来携带用户的 SessionId，所以可以用 window.location.href 来打开一个链接下载文件。

当然，还有一种情况，不需要登录态的校验（比较che）。

众所周知，还有另一种登录态的处理方式 JWT(JSON Web Token)。这种情况，一般会要求，前端在下载文件的时候在 请求首部 字段中添加 Token 首部字段。那么，这样一来，我们就不能直接通过 window.location.href 来下载文件。

不过，幸运的是我们有Blob ，它是浏览器端的 类文件对象 ，基于二进制数据，我们可以通过它来 优雅地 处理文件下载，不限于音视频、PDF、Excel 等等。所以，今天我们就从后端导出文件到 HTTP协议、非简单请求下的 预检请求 、以及最后的 Blob 处理文件，了解一番 何为其然、如何使其然？

后端（Koa2）导出文件（Excel）

首先，我们从后端导出文件讲起。这里，我选择Koa2 来实现Excel的导出，然后搭配 node-xlsx这个库，从而实现Excel 的二进制数据的导出。它看起来会是这样：

const xlsx = require("node-xlsx")

router.get("/excelExport", async function (ctx, next) {
    // 数据查询的结果
    const res = ["五柳", "22"]
    // 生成 excel 对应的 buffer 二进制文件
    const excelFile = xlsx.build([{name: "firstSheet", data: res}])
    // 设置文件名相关的响应首部字段
    ctx.set("Content-Disposition", "attachment;filename=test.xlsx;filename*=UTF-8")
    // 返回给前端
    ctx.body = buffer;
  });

这里就不对