最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

淺談vue中文件下載的幾種方式及方法封裝

 更新時間:2023年01月13日 09:58:13   作者:嘖嘖靜  
本文主要介紹了淺談vue中文件下載的幾種方式及方法封裝,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一、通過對后端發(fā)送post請求,使用blob下載文件

/**
?* @param {blob} res - 導出數(shù)據(jù)
?* @param {string} fileName - 文件導出名稱
?* @param {string} format - 導出文件格式
?* @return {*}
?*/
function downBlob(res, fileName = "導出報表", format = "xlsx") {
? // 調用接口獲取到文件
? const blob = new Blob([res], {
? ? type: "application/vnd.ms-excel"
? });
? // 下載文件名
? fileName = fileName + parseInt(Math.random() * 9999) + "." + format;
? const linkNode = document.createElement("a");

? linkNode.download = fileName; // a標簽的download屬性規(guī)定下載文件的名稱
? linkNode.style.display = "none";
? linkNode.href = URL.createObjectURL(blob); // 生成一個Blob URL
? document.body.appendChild(linkNode);
? linkNode.click(); // 模擬在按鈕上的一次鼠標單擊

? URL.revokeObjectURL(linkNode.href); // 釋放URL 對象
? document.body.removeChild(linkNode);
}

二、通過對后端發(fā)送post請求,使用url下載文件

/**
?* @param {string} fileName - 文件導出名稱
?* @param {string} url - 文件url地址
?* @return {*}
?*/
function download(fileName, url) {
? fileName = fileName || "導出報表";
? let arr = url.split(".");
? fileName += parseInt(Math.random() * 9999) + "." + arr[arr.length - 1];
? const linkNode = document.createElement("a");
? linkNode.download = fileName; // a標簽的download屬性規(guī)定下載文件的名稱
? linkNode.style.display = "none";
? if (process.env.VUE_APP_TEM_PATH) {
? ? // 生成一個Blob URL
? ? linkNode.href = process.env.VUE_APP_TEM_PATH + url;
? } else {
? ? // 生成一個Blob URL
? ? linkNode.href = url;
? }
? document.body.appendChild(linkNode);
? linkNode.click(); // 模擬在按鈕上的一次鼠標單擊
? URL.revokeObjectURL(linkNode.href); // 釋放URL 對象
? document.body.removeChild(linkNode);
}

進行main.js中全局引用

// 通過url下載文件
import { download } from "@/utils/auth";
Vue.prototype.$download = download;

// 通過blob下載文件
import { downBlob } from "@/utils/auth";
Vue.prototype.$downBlob = downBlob;

實際使用方式

// res.data.url 通過url下載文件
this.$download("銷售統(tǒng)計", res.data.url);

// res 通過blob下載文件
this.$downBlob(res, "商城訂單與ERP訂單對照明細");

到此這篇關于淺談vue中文件下載的幾種方式及方法封裝的文章就介紹到這了,更多相關vue 文件下載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 一文帶你了解Vue數(shù)組的變異方法

    一文帶你了解Vue數(shù)組的變異方法

    Vue框架提供了一些便捷的數(shù)組變異方法,包括push、pop、shift、unshift、splice、sort和reverse等,Vue的數(shù)組變異方法可以自動觸發(fā)DOM更新,本文就詳細帶大家了解一下Vue.js數(shù)組的變異方法
    2023-06-06
  • 詳解vue-admin和后端(flask)分離結合的例子

    詳解vue-admin和后端(flask)分離結合的例子

    本篇文章主要介紹了詳解vue-admin和后端(flask)分離結合的例子,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • 在vue項目中集成graphql(vue-ApolloClient)

    在vue項目中集成graphql(vue-ApolloClient)

    這篇文章主要介紹了在vue項目中集成graphql(vue-ApolloClient),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • Vue中@click事件的常見修飾符用法總結

    Vue中@click事件的常見修飾符用法總結

    這篇文章主要給大家介紹了關于Vue中@click事件的常見修飾符用法的相關資料,@click事件修飾符是在Vue組件中用來修改@click事件行為的特殊標記,需要的朋友可以參考下
    2023-10-10
  • vue-better-scroll 的使用實例代碼詳解

    vue-better-scroll 的使用實例代碼詳解

    這篇文章主要介紹了vue-better-scroll 的使用實例代碼詳解,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-12-12
  • Vue分頁插件的前后端配置與使用

    Vue分頁插件的前后端配置與使用

    這篇文章主要為大家詳細介紹了Vue分頁插件的前后端配置與使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • swiper/vue 獲取 swiper實例方法詳解

    swiper/vue 獲取 swiper實例方法詳解

    在網(wǎng)上搜了一下如何調用swiper實例,大部分都是通過 swiperRef = new Swiper(‘.swiper’, options) 這種方法初始化swiper,然后直接能用 swiperRef 實例,這篇文章主要介紹了swiper/vue 獲取 swiper實例方法詳解,需要的朋友可以參考下
    2023-12-12
  • vue 組件的封裝之基于axios的ajax請求方法

    vue 組件的封裝之基于axios的ajax請求方法

    今天小編就為大家分享一篇vue 組件的封裝之基于axios的ajax請求方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue.js select下拉框綁定和取值方法

    vue.js select下拉框綁定和取值方法

    下面小編就為大家分享一篇vue.js select下拉框綁定和取值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 一文詳解Vue.js與TypeScript的生命周期

    一文詳解Vue.js與TypeScript的生命周期

    Vue與TypeScript的結合使得開發(fā)大型應用變得更加容易和高效,本文將詳細探討Vue.js組件中TypeScript的應用,特別是它的生命周期鉤子函數(shù),并通過豐富的示例,為你提供一個實戰(zhàn)指南,需要的朋友可以參考下
    2023-11-11

最新評論

神农架林区| 江安县| 永安市| 唐海县| 壶关县| 惠来县| 兴仁县| 鄂托克旗| 闻喜县| 哈密市| 广安市| 兴宁市| 南安市| 射阳县| 西宁市| 泉州市| 鲜城| 时尚| 越西县| 台北县| 长寿区| 米泉市| 金华市| 沙坪坝区| 全椒县| 东阳市| 正蓝旗| 榕江县| 开鲁县| 延安市| 商河县| 西乌| 嘉祥县| 武清区| 中西区| 龙陵县| 启东市| 福安市| 北辰区| 霍州市| 含山县|