vue實(shí)現(xiàn)excel文件導(dǎo)入導(dǎo)出操作示例
更新時(shí)間：2023年07月18日 14:02:40 作者：Smith
這篇文章主要為大家介紹了vue實(shí)現(xiàn)excel文件的導(dǎo)入導(dǎo)出實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
前端對execl文件數(shù)據(jù)進(jìn)行處理
實(shí)現(xiàn)導(dǎo)入execl文件 處理完成后 導(dǎo)出execl文件
庫地址
https://www.npmjs.com/package/@d2-projects/vue-table-import
https://www.npmjs.com/package/@d2-projects/vue-table-export
下載到自己項(xiàng)目
npm i @d2-projects/vue-table-export npm i @d2-projects/vue-table-import
項(xiàng)目中引入
我一般這種多個(gè)地方用到的 就全局引入
import pluginImport from '@d2-projects/vue-table-import' Vue.use(pluginImport) import pluginExport from "@d2-projects/vue-table-export"; Vue.use(pluginExport);
導(dǎo)入execl
<template>
<div>
<el-upload :before-upload="handleUpload" action="上傳地址">
<el-button >點(diǎn)擊導(dǎo)入execl表格</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
table: {
columns: [],
data: [],
},
};
},
methods: {
handleUpload(file) {
this.$import.xlsx(file).then(({ header, results }) => {
// header, results是返回的參數(shù) 打印看下
});
}
},
};
</script>
<style>
</style>導(dǎo)出execl
<template>
<div>
<el-button @click="exportFile" >
<el-icon name="download" />導(dǎo)出為 Excel
</el-button>
</div>
</template>
<script>
export default {
data() {
return {
table: {
columns: [],
data: []
}
}
},
methods: {
exportFile() {
this.$export.excel({
columns: this.table.columns,
data: this.table.data
}).then(() => {
this.$message('導(dǎo)出成功')
})
}
}
}
</script>
<style>
</style>至此完成
以上就是vue實(shí)現(xiàn)excel導(dǎo)入 導(dǎo)出的詳細(xì)內(nèi)容，更多關(guān)于vue導(dǎo)入導(dǎo)出excel的資料請關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了Vue與React的區(qū)別和優(yōu)勢對比，幫助大家更好的選擇適合自己的前端框架，迷茫的同學(xué)可以進(jìn)來參考下2020-12-12
Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這篇文章主要介紹了Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue版本vue2.9.6升級到vue3.0的詳細(xì)步驟
vue版本升級相信大家應(yīng)該都遇到過,下面這篇文章主要給大家介紹了關(guān)于Vue版本vue2.9.6升級到vue3.0的詳細(xì)步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue手寫實(shí)現(xiàn)異步更新詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-08-08
這篇文章主要介紹了詳解如何在你的Vue項(xiàng)目配置vux，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
本文主要介紹了詳解vue中父子參數(shù)傳遞雙向的方式不同,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-06-06
Vite打包性能優(yōu)化之開啟Gzip壓縮實(shí)踐過程
vue前端項(xiàng)目發(fā)布的時(shí)候,打包可實(shí)現(xiàn)gzip格式的壓縮,下面這篇文章主要給大家介紹了關(guān)于Vite打包性能優(yōu)化之開啟Gzip壓縮的相關(guān)資料,需要的朋友可以參考下2022-12-12
React和Vue實(shí)現(xiàn)路由懶加載的示例代碼
路由懶加載是一項(xiàng)關(guān)鍵技術(shù),它可以幫助我們提高Web應(yīng)用的加載速度,本文主要介紹了React和Vue實(shí)現(xiàn)路由懶加載的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決
我們在開web開發(fā)的時(shí)候，經(jīng)常會(huì)使用到element或者uview-ui,下面這篇文章主要給大家介紹了關(guān)于在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2022-04-04
今天小編就為大家分享一篇vue初始化動(dòng)畫加載的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09