vue使用js-file-download完成導出功能實例
更新時間：2024年07月18日 10:12:12 作者：五月呀
這篇文章主要介紹了vue使用js-file-download完成導出功能實例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue使用js-file-download完成導出功能
安裝js-file-download
npm install js-file-download
引入對應的功能模塊
import fileDownLoad from 'js-file-download' import Axios from 'axios'//ajax請求 import store from '@/store'//設(shè)置token
代碼段
exportData(){
var _this = this
Axios({
url:'ajax url'
method: 'post',
headers: {
'Authorization': token
},
data:{
licenseNo:_this.searchForm.licenseNo,
},
responseType: 'blob',
}).then(res => {
fileDownload(res.data, new Date().getTime()+ '.xlsx');
})
}vue下載插件downloadjs
安裝依賴
npm install downloadjs
使用范例
<template>
<div style="margin:20px">
<button @click="downloadText">下載文本——“{{ text }}”</button>
</div>
</template>
<script>
import download from "downloadjs";
export default {
methods: {
downloadText() {
this.fileName = "點擊下載文本后生成的txt文件.txt";
download(this.text, this.fileName, "text/plain");
},
},
data() {
return {
text: "我愛你，中國！",
fileName: "",
};
},
};
</script>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中v-html圖片過大導致溢出的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹Vue3中簡單diff算法的實現(xiàn)與使用，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的可以了解一下2022-09-09
關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)
這篇文章主要介紹了關(guān)于下拉類型多選組件Vue-Treeselect(鍵名轉(zhuǎn)換)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件
在開發(fā)中如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進行上傳,將各個文件的切片傳遞給后臺,然后后臺再進行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下2023-01-01
本文主要介紹了el-table?動態(tài)合并不定項多級表頭的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
最近參與web開發(fā)時,讓我解決一個elementui控制內(nèi)容單行顯示,下面這篇文章主要給大家介紹了關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vuejs如何通過Axios請求數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中全局變量的定義和使用，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
在做后臺管理系統(tǒng)時,經(jīng)常會有權(quán)限管理的功能,本文主要介紹了vue3實現(xiàn)按鈕權(quán)限管理的項目實踐,具有一定的參考價值,感興趣的可以了解一下2023-08-08
Vue3中的事件修飾符包括：.stop（阻止冒泡）、.prevent（阻止默認事件）、.self（阻止自身事件）、.capture（打亂冒泡順序）、.once（事件只觸發(fā)一次）和.passive（事件默認行為立即執(zhí)行）,這些修飾符可以幫助開發(fā)者更靈活地控制事件的處理方式2025-02-02