vue實現excel文件導入導出操作示例
更新時間:2023年07月18日 14:02:40 作者:Smith
這篇文章主要為大家介紹了vue實現excel文件的導入導出實現示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
前端對execl文件數據進行處理
實現導入execl文件 處理完成后 導出execl文件
庫地址
https://www.npmjs.com/package/@d2-projects/vue-table-import
https://www.npmjs.com/package/@d2-projects/vue-table-export
下載到自己項目
npm i @d2-projects/vue-table-export npm i @d2-projects/vue-table-import
項目中引入
我一般這種多個地方用到的 就全局引入
import pluginImport from '@d2-projects/vue-table-import' Vue.use(pluginImport) import pluginExport from "@d2-projects/vue-table-export"; Vue.use(pluginExport);
導入execl
<template>
<div>
<el-upload :before-upload="handleUpload" action="上傳地址">
<el-button >點擊導入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是返回的參數 打印看下
});
}
},
};
</script>
<style>
</style>導出execl
<template>
<div>
<el-button @click="exportFile" >
<el-icon name="download" />導出為 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('導出成功')
})
}
}
}
</script>
<style>
</style>至此完成
以上就是vue實現excel導入 導出的詳細內容,更多關于vue導入導出excel的資料請關注腳本之家其它相關文章!

