欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用axios實(shí)現(xiàn)excel文件下載的功能

 更新時(shí)間:2020年07月16日 14:20:26   作者:張占嶺  
這篇文章主要介紹了vue中使用axios實(shí)現(xiàn)excel文件下載的功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前端VUE頁面上的導(dǎo)出或者下載功能,一般是調(diào)用后端的一個(gè)接口,由接口生成excel,word這些文件的流信息,返回給vue,然后由vue去構(gòu)建下載的動(dòng)作,這邊整理了一下,封裝了一下,方便以后復(fù)用。

封裝一個(gè)download文件

使用年月日時(shí)分秒毫秒做為文件的名稱,下載為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', //二進(jìn)制流
  }).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 對(duì)象
      document.body.removeChild(elink);
    } else {
      // IE10+下載
      navigator.msSaveBlob(blob, fileName);
    }
  });
};

為具體功能封裝一個(gè)組件,方便在前臺(tái)調(diào)用

// 評(píng)價(jià)導(dǎo)出
export const getRecordExport= (params) => {
  return downloadFile('/record/export',"xlsx", params)
}

vue頁面上調(diào)用它,實(shí)現(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實(shí)現(xiàn)excel文件下載的功能的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)excel文件下載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法

    vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法

    今天小編就為大家分享一篇vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue SPA單頁應(yīng)用首屏優(yōu)化實(shí)踐

    Vue SPA單頁應(yīng)用首屏優(yōu)化實(shí)踐

    這篇文章主要介紹了Vue SPA單頁應(yīng)用首屏優(yōu)化實(shí)踐,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法

    vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法

    這篇文章主要介紹了vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法,如果想讓pinia數(shù)據(jù)不會(huì)重復(fù)獲取之前的值需要手動(dòng)強(qiáng)制觸發(fā) Pinia store 的狀態(tài)更新,文中有詳細(xì)的解決方法,需要的朋友可以參考下
    2024-04-04
  • 詳解vue-router 命名路由和命名視圖

    詳解vue-router 命名路由和命名視圖

    這篇文章主要介紹了詳解vue-router 命名路由和命名視圖,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • Vue非父子組件通信詳解

    Vue非父子組件通信詳解

    這篇文章主要為大家詳細(xì)介紹了Vue非父子組件通信的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • vue中elementUI里面一些插件的使用

    vue中elementUI里面一些插件的使用

    Element UI是一套基于Vue的桌面端組件庫,封裝好了很多常用的UI組件,下面這篇文章主要給大家介紹了關(guān)于vue中elementUI里面一些插件的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • 你不知道的Vue技巧之--開發(fā)一個(gè)可以通過方法調(diào)用的組件(推薦)

    你不知道的Vue技巧之--開發(fā)一個(gè)可以通過方法調(diào)用的組件(推薦)

    這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個(gè)可以通過方法調(diào)用的組件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue組件historyApiFallback作用詳解

    vue組件historyApiFallback作用詳解

    這篇文章主要為大家介紹了vue組件historyApiFallback作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06
  • vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例

    vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例

    下面小編就為大家?guī)硪黄獀ue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-11-11
  • vue中組件的3種使用方式詳解

    vue中組件的3種使用方式詳解

    這篇文章主要給大家介紹了關(guān)于vue中組件的3種使用方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03

最新評(píng)論