前後端處理流檔案請求

一顆白菜發表於2019-02-13

知識點

  • nodeAPI——stream
  • nodeAPI——fs
  • koa——response封裝

服務端返回流檔案

koa 請求響應流檔案

this.ctx.body = fs.createReadStream(`${__dirname}/../../index.js`);
複製程式碼

koa/lib/application.js 原始碼中,有判斷body是否為流物件,然後 pipe 到響應物件中去

// responses
  if (Buffer.isBuffer(body)) return res.end(body);
  if ('string' == typeof body) return res.end(body);
  if (body instanceof Stream) return body.pipe(res);
複製程式碼

前端處理流檔案

引用fetch庫,response為ReadableStream物件,blob() 後可獲取buffer檔案。利用h5的URL的API來下載buffer檔案

import fetch from 'dva/fetch';
fetch(`http://localhost:7001/test`, {method: 'GET',})
.then((res) => res.blob())
.then((blob)=>{
  var a = document.createElement("a");
  const url = window.URL || window.webkitURL || window.moxURL
  // 建立下載連結
  a.href = url.createObjectURL(blob)
  a.download = "a.txt";
  document.body.appendChild(a);
  a.click();
  // 然後移除
  document.body.removeChild(a);
});
複製程式碼

相關文章