后端导出excel 表格 前端下载

问题描述：

后端导出excel表格为二进制 前端调取接口并下载 

方案： 前端将返回数据  设置响应数据类型为blob

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

封装函数： /**    * 后端导出excel方法    * @param postDate 接口传参    * @param interfaceUrl 接口地址    * @param excelName excel文件名    */ import {message} from 'ant-design-vue' export function exportExcel(postDate, interfaceUrl, excelName,type='post') {   return new Promise((resolve, reject) => {     let BASE_URL = process.env.VUE_APP_API_BASE_URL;     const data = JSON.stringify(postDate);     const url = BASE_URL + interfaceUrl;     var xhr = new XMLHttpRequest();     xhr.open(type, url, true);     xhr.responseType = "blob"; // 设置响应数据类型为blob， 不设置会出现下载的文件比源文件更大     xhr.setRequestHeader("Authorization", window.localStorage.getItem("token"));     xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");     xhr.setRequestHeader("Accept", "application/json, text/plain, */*");     xhr.send(data);     xhr.onload = function () {       //判断返回的是json 还是二进制流       if (this.response.type == "application/json") {         let reader = new FileReader();         reader.readAsText(this.response, "utf-8");         reader.onload = (e) => {           let readerres = reader.result;           let parseObj = {};           parseObj = JSON.parse(readerres);           message.error(parseObj.errorMsg);           resolve()         };       } else {         var blob = new Blob([this.response], { type: this.responseType }); // ArrayBuffer , mime类型         var a = document.createElement("a");         var url = window.URL.createObjectURL(blob);         a.href = url;         a.download = `${excelName}.xls`;         a.click();         resolve()       }     };   }) }

　　调用：

?

1 2	exportExcel(请求参数, 请求地址, 下载文件名).then(res => {         console.log(res); })