GX博客

本文介绍使用 koa2 和原生 fetch 实现简单的文件流下载。

koa2的文件流响应

下面为 koa2 的路由控制器例子：

router.post('/download', async function (ctx, next) {
    const filePath = path.join(__dirname, 'test.xlsx');
    let file = fs.createReadStream(filePath);
    try {
      await new Promise((resolve, reject) => {
        file.on('open', function () {
          // 没有特定类型的二进制文件，使用 application/octet-stream
          ctx.set('content-type', 'application/octet-stream');
          ctx.body = file;
          resolve();
        });
        file.on('error', function (err) {
          reject(err);
        })
      });
    } catch (e) {
      console.error(e);
      next();
    }
  });

fetch的Blob转换

下面为浏览器端的 fetch 请求例子：

const btn = document.getElementById('download');
btn.onclick = function() {
  fetch('http://localhost:3000/exportInquiry', {
    method: 'post'
  })
    .then(res => {
      if (res.status >= 400) {
        throw new Error("Bad response from server");
      }
      // 返回一个使用 Blob 解决的 promise
      return res.blob();
    })
    .then(blob => {
      // 创建 URL 的 Blob 对象
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = "filename.xlsx";
      // 兼容旧版本火狐浏览器，将 a 标签插入 DOM 中
      document.body.appendChild(a);
      a.click();
      a.remove();
    })
    .catch(err => {
      console.error('Fetch error occurred.', err);
    });
}