通常情況blob后臺文件流都是如下圖這樣讓人崩潰的亂碼?

?

<el-buttontype="success"@click.stop="handleExport"icon="el-icon-download"
>導出</el-button>

// 導出----------------------------------------
handleExport() {this.loading = true;const data = {// 導出----------------------------------------/*file_name:"推廣記錄(" +new Date().toLocaleString("zh-Hans-CN", {year: "numeric",month: "2-digit",day: "2-digit",hour12: false,hour: "2-digit",minute: "2-digit",second: "2-digit",}).replace(/\//g, "-") +").xlsx",*/// ----------------------------------------gid: this.searchForm.gid,gname: this.searchForm.gname,type: this.searchForm.type,status: this.searchForm.status,num: this.searchForm.num,hy: this.searchForm.hy,remark: this.searchForm.remark,};this.$axios.post("https://xxx.com/getlist?export_flag=1",data,{ responseType: "blob" }).then((d) => {if (!d.data) return (this.loading = false,this.$message.error(d.msg)); //導出失敗報錯！// 自動下載blob文件流xls文件----------------------------------------const blob = new Blob([d.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",});//防止下載的文件亂碼const url = window.URL.createObjectURL(blob);const link = document.createElement("a");link.style.display = "none";link.href = url;link.setAttribute("download",`導出文件(${new Date().toLocaleString("zh-Hans-CN", {year: "numeric",month: "2-digit",day: "2-digit",hour12: false,hour: "2-digit",minute: "2-digit",second: "2-digit",}).replace(/\//g, "-").replace(/\:/g, "")}).xlsx`//后綴名一定要用xlsx，否則會亂碼); //設置下載文件名document.body.appendChild(link);link.click();document.body.removeChild(link); // 下載完成移除元素window.URL.revokeObjectURL(url); // 釋放掉blob對象//----------------------------------------this.$message.success("導出xlsx成功");this.loading = false;});
},
// ----------------------------------------

總結

以上是生活随笔為你收集整理的vue element 导出blob后台文件流xlsx文件自动下载（且规避乱码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。