JS實現(xiàn)Excel導出功能以及導出亂碼問題解決詳解

更新時間：2023年07月27日 10:28:38 作者：DCodes

這篇文章主要為大家詳細介紹了JavaScript如何調(diào)用后臺接口實現(xiàn)Excel導出功能以及導出亂碼問題的解決辦法，需要的小伙伴可以參考一下

實現(xiàn)效果

在導出表格數(shù)據(jù)的時候，通常分為兩種情況

頁面列表數(shù)據(jù)導出
接口返回數(shù)據(jù)導出

這里主要介紹接口返回數(shù)據(jù)導出，關(guān)于頁面的列表數(shù)據(jù)導出，請看另一篇：vue3+element表格數(shù)據(jù)導出

接口返回數(shù)據(jù)導出，通常需要請求后端接口獲取數(shù)據(jù)，接口返回的數(shù)據(jù)基本上是亂碼的，需要先處理亂碼的數(shù)據(jù)，否則導出來的文件是損壞的，如下

看到這種返回信息，表格數(shù)據(jù)基本上是已經(jīng)拿到了，現(xiàn)在只需要做一下數(shù)據(jù)的處理即可導出表格。

解決方法步驟拆解

步驟一：解碼

在請求接口的位置添加 { responseType: 'blob' } 將信息轉(zhuǎn)碼，此處有兩種寫法：

寫法1：

// 導出
export function userTable(params) {
    return request({
        url: '/users/table',
        method: 'get',
        params,
        responseType: 'blob'   // 添加 blob 解決亂碼問題，或者 arraybuffer
    })
}

寫法2：

export const userTable = (params) => axios.get('/users/table',{params},{ responseType: 'blob' })
// 在請求的后面加一行  { responseType: 'blob' }
// 或者   { responseType: 'arraybuffer' }

步驟二：請求數(shù)據(jù)

  // 導出  
const getTable = async () => {
   // 請求導出接口 獲取到后端返回的數(shù)據(jù)
   let list = await getTableInfo(PageInfo);  
   console.log(list)
};

此處得到的返回結(jié)果已經(jīng)成功編譯，打印的結(jié)果如圖所示：

步驟三：導出表格

步驟一配置完后這里可以直接復制，替換一下請求的接口即可

// 導出完整語法  
const getTable = async () => {
   // 請求導出接口 獲取到后端返回的數(shù)據(jù)
   let list = await getTableInfo(PageInfo);  
   // content = 導出返回的數(shù)據(jù)
  let content = list;  
  let data = new Blob([content], {
    type: "application/vnd.ms-excel;charset=utf-8"
  });
  let downloadUrl = window.URL.createObjectURL(data);
  let anchor = document.createElement("a");
  anchor.href = downloadUrl;
  anchor.download = "表格名稱.xlsx"; // 表格名稱.文件類型
  anchor.click();
  window.URL.revokeObjectURL(list);  // 消除請求接口返回的list數(shù)據(jù)
  };
};

到此這篇關(guān)于JS實現(xiàn)Excel導出功能以及導出亂碼問題解決詳解的文章就介紹到這了,更多相關(guān)JS Excel導出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: