主要邏輯

handleExportExcel(){
  exportExcel().then(res=>{
    const blob = new Blob([res], { 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', `花名冊列表-${dayjs().format('YYYY-MM-DD')}`)
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // 下載完成移除元素
    window.URL.revokeObjectURL(url); // 釋放掉blob物件
  })
}
 

注意點

• 首先前後端的響應型別應該相同

  • 檢視瀏覽器請求響應頭 content-type值是否與Blob建構函式中的type相同，各種MIME型別對應值檢視 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

• 注意亂碼問題

  • 前端在請求介面中axios中設定 responseType:'blob' resopnseType對應值檢視http://www.axios-js.com/zh-cn/docs/#axios-create-config

  export function exportExcel(data) { // 匯出
    return request({
      url: '/exportExcel',
      method: 'post',
      responseType: 'blob',
      data
    })
  }
   
  

  ​