vue中axios使用post請求下載檔案中文亂碼
阿新 • • 發佈:2020-08-12
1、首先我們需要單獨封裝或者自己在新建axios的時候,需要加上:responseType:"blob", 例如:
let param = Object.assign({}, this.form, { pageIndex: "1", pageSize: "1000", }); axios({ method: "post", url:axios.defaults.baseM3URL+ "/find/logs/export", responseType: "blob", data: param, }).then((res)=> {})
2、當前這樣做還是遠遠不夠滴,blob的預設編碼方式是utf-8,所以就算我們下載下來文件,中文還是亂碼的,我們需要將其轉換為gbk格式,如何轉換呢?在介面請求的出參的最前面加上\ufeff,下面是全部程式碼僅供參考,親測有效哦
startDownload() { let param = Object.assign({}, this.form, { pageIndex: "1", pageSize: "1000", }); axios({ method: "post", url:axios.defaults.baseM3URL+ "/find/logs/export", responseType: "blob", data: param, }).then((res) => { debugger let today = new Date(); let tadayDate = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate(); const fileName = "日誌查詢-" + tadayDate + ".csv"; let resdata = "\ufeff" + res.data; let blob = new Blob([resdata], { type: 'text/csv,charset=UTF-8'});if (window.navigator.msSaveOrOpenBlob) { //msSaveOrOpenBlob方法返回bool值 navigator.msSaveBlob(blob, fileName); //本地儲存 } else { var link = document.createElement("a"); //a標籤下載 link.href = window.URL.createObjectURL(blob); link.download = fileName; link.click(); window.URL.revokeObjectURL(link.href); } }) },