Vue中如何利用new Blob实现基于文件流的下载操作？

本文共计211个文字，预计阅读时间需要1分钟。

聊聊JS的二进制家族：Blob、ArrayBuffer和Buffer

JS中的Blob和ArrayBuffer

封装方法：function getExel(url, params, index) { return new Promise(function(resolve, reject) { let data={ method: GET, url: http://example.com/excel + index + .xlsx, headers: { Content-Type: application/json }, body: JSON.stringify(params) }; fetch(data.url, data) .then(response=> response.blob()) .then(blob=> { let reader=new FileReader(); reader.onload=function() { let arrayBuffer=reader.result; let excelData=new Uint8Array(arrayBuffer); resolve(excelData); }; reader.readAsArrayBuffer(blob); }) .catch(error=> reject(error)); });}

​​聊聊JS的二进制家族：Blob、ArrayBuffer和Buffer​​

​​JS中的Blob和ArrayBuffer​​

封装方法

function getExel(url, params, index) {+ return new Promise(function(resolve, reject) { let data = { method: "GET", url:url, headers: { 'token': gettoken("token") }, responseType: 'arraybuffer' } resolve(axios(data)); })}

注意：responseType应设置为：'arraybuffer'

发送请求（$Api已经挂载在了vue对象上，所以可以这么使用）

this.$Api.getExel("/goodsCheckService/v1/planMaterial/export?idList="+idArray) .then(response => { let a = document.createElement('a'); //ArrayBuffer 转为 Blob let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); let objectUrl = URL.createObjectURL(blob); a.setAttribute("href",objectUrl); a.setAttribute("download", '计划单电子表格.xls'); a.click();});