vue實現(xiàn)excel文件導(dǎo)入導(dǎo)出操作示例
前端對execl文件數(shù)據(jù)進行處理
實現(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
下載到自己項目
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);
導(dǎo)入execl
<template> <div> <el-upload :before-upload="handleUpload" action="上傳地址"> <el-button >點擊導(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實現(xiàn)excel導(dǎo)入 導(dǎo)出的詳細內(nèi)容,更多關(guān)于vue導(dǎo)入導(dǎo)出excel的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Pinia進階setup函數(shù)式寫法封裝到企業(yè)項目
這篇文章主要為大家介紹了Pinia進階setup函數(shù)式寫法封裝到企業(yè)項目實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07vue component 中引入less文件報錯 Module build failed
這篇文章主要介紹了vue component 中引入less文件報錯 Module build failed的解決方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04