vue实现excel文件导入导出操作示例
作者：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的资料请关注脚本之家其它相关文章！