后端返回文件流和json格式的方式进行文件下载导出
1. 接口返回的类型是文件流的格式
fetch({ url: this.exportUrl, method: "post", data: obj, noFormat: true, headers: { "Content-Type": "application/json; application/octet-stream" }, responseType: "arraybuffer" }).then(result => { if (result.data.error_code) { this.$hMessage.error(result.data.error_message || "导出失败!"); return; } var b = new Blob([result.data], { type: "application/vnd.ms-excel" }); // 根据传入的参数b创建一个指向该参数对象的URL var url = URL.createObjectURL(b); var link = document.createElement("a"); // 导出的文件名 let fileName = "demo.xlsx"; link.download = fileName; link.href = url; link.click(); });
2. 接口返回的类型是json格式,里面字段对应base64格式的文件
fetch({ url: this.exportUrl, method: "post", data: obj, noFormat: true, responseType: "json" }).then(result => { if (result.data.error_code) { this.$hMessage.error(result.data.error_message || "导出失败!"); return; } // 核心 将base64的字符串转为文件流 function dataURLtoBlob(base64Str) { var bstr = atob(base64Str), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } // 下载的是excel格式的文件 return new Blob([u8arr], { type: "application/vnd.ms-excel" }); } var blob = dataURLtoBlob(result.data.result.base64); var downloadUrl = window.URL.createObjectURL(blob); var anchor = document.createElement("a"); anchor.href = downloadUrl; anchor.download = decodeURI(result.data.result.filename); anchor.click(); // window.URL.revokeObjectURL(blob); }).catch((e) => { this.$hMessage.error(e || "导出失败!"); });
其他类型: //// 'doc' => 'application/msword', //// 'bin' => 'application/octet-stream', //// 'exe' => 'application/octet-stream', //// 'so' => 'application/octet-stream', //// 'dll' => 'application/octet-stream', //// 'pdf' => 'application/pdf', //// 'ai' => 'application/postscript', //// 'xls' => 'application/vnd.ms-excel', //// 'ppt' => 'application/vnd.ms-powerpoint', //// 'dir' => 'application/x-director', //// 'js' => 'application/x-javascript', //// 'swf' => 'application/x-shockwave-flash', //// 'xhtml' => 'application/xhtml+xml', //// 'xht' => 'application/xhtml+xml', //// 'zip' => 'application/zip', //// 'mid' => 'audio/midi', //// 'midi' => 'audio/midi', //// 'mp3' => 'audio/mpeg', //// 'rm' => 'audio/x-pn-realaudio', //// 'rpm' => 'audio/x-pn-realaudio-plugin', //// 'wav' => 'audio/x-wav', //// 'bmp' => 'image/bmp', //// 'gif' => 'image/gif', //// 'jpeg' => 'image/jpeg', //// 'jpg' => 'image/jpeg', //// 'png' => 'image/png', //// 'css' => 'text/css', //// 'html' => 'text/html', //// 'htm' => 'text/html', //// 'txt' => 'text/plain', //// 'xsl' => 'text/xml', //// 'xml' => 'text/xml', //// 'mpeg' => 'video/mpeg', //// 'mpg' => 'video/mpeg', //// 'avi' => 'video/x-msvideo', //// 'movie' => 'video/x-sgi-movie',