vue使用axios實現(xiàn)excel文件下載的功能
前端VUE頁面上的導(dǎo)出或者下載功能,一般是調(diào)用后端的一個接口,由接口生成excel,word這些文件的流信息,返回給vue,然后由vue去構(gòu)建下載的動作,這邊整理了一下,封裝了一下,方便以后復(fù)用。
封裝一個download文件
使用年月日時分秒毫秒做為文件的名稱,下載為excel文件
/** * 下載文件 */ export const downloadFile = (url,ext, params) => { let accessToken = getStore('accessToken'); return axios({ method: 'get', url: `${base}${url}`, params: params, headers: { 'accessToken': accessToken }, responseType: 'blob', //二進制流 }).then(res => { // 處理返回的文件流 const content = res; const blob = new Blob([content], { type: 'application/vnd.ms-excel;charset=utf-8' }); var date = new Date().getFullYear() + "" + (new Date().getMonth() + 1) + "" + new Date().getDate() + "" + new Date().getHours() + "" + new Date().getMinutes() + "" + new Date().getSeconds() + "" + new Date().getMilliseconds(); const fileName = date + "." + ext; if ("download" in document.createElement("a")) { // 非IE下載 const elink = document.createElement("a"); elink.download = fileName; elink.style.display = "none"; elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href); // 釋放URL 對象 document.body.removeChild(elink); } else { // IE10+下載 navigator.msSaveBlob(blob, fileName); } }); };
為具體功能封裝一個組件,方便在前臺調(diào)用
// 評價導(dǎo)出 export const getRecordExport= (params) => { return downloadFile('/record/export',"xlsx", params) }
vue頁面上調(diào)用它,實現(xiàn)導(dǎo)出
<script> import { getReportExport } from "@/api/index"; import util from "@/libs/util.js"; export default { name: "task-manage", data() {}, methods: { exportExcel() { getReportExport(this.searchForm).then(res=>{}); } } }
截圖
到此這篇關(guān)于vue使用axios實現(xiàn)excel文件下載的功能的文章就介紹到這了,更多相關(guān)vue實現(xiàn)excel文件下載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法
這篇文章主要介紹了vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法,如果想讓pinia數(shù)據(jù)不會重復(fù)獲取之前的值需要手動強制觸發(fā) Pinia store 的狀態(tài)更新,文中有詳細的解決方法,需要的朋友可以參考下2024-04-04你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實例
下面小編就為大家?guī)硪黄獀ue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11