vue 实现execl导入 导出

前端对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>

至此完成