1. 程式人生 > 實用技巧 >vue中axios使用post請求下載檔案中文亂碼

vue中axios使用post請求下載檔案中文亂碼

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); } }) },