vue纯前端导入导出excel

我们有时会遇到在前端实现导入/导出excel的需求

这里直接推荐两个现成的vue导入导出excel的库，他们是基于xlsx封装的

https://www.npmjs.com/package/@d2-projects/vue-table-import

https://www.npmjs.com/package/@d2-projects/vue-table-export

不过这两个库有些地方需要大家注意

1、已经两年没有更新了

2、这两个库使用到了element的一些组件

如果有需要，我还是推荐大家把这两个库clone到本地，然后根据自己的实际需求做一下调整

不过这里简单起见，我就直接演示一下用法

首先安装这两个库，执行

npm i @d2-projects/vue-table-export
npm i @d2-projects/vue-table-import

然后请看演示代码：

导入excel

<template>
  <div>
    <el-upload :before-upload="handleUpload" action="default">
      <el-button type="primary">选择要导入的 .xlsx 表格</el-button>
    </el-upload>
  </div>
</template>
 
<script>
import Vue from "vue";
import pluginImport from "@d2-projects/vue-table-import";
 
Vue.use(pluginImport);
 
export default {
  data() {
    return {
      table: {
        columns: [],
        data: [],
      },
    };
  },
  methods: {
    handleUpload(file) {
      this.$import.xlsx(file).then(({ header, results }) => {
        this.table.columns = header.map((e) => {
          return {
            label: e,
            prop: e,
          };
        });
        this.table.data = results;
      });
      return false;
    }
  },
};
</script>
 
<style>
</style>

导出excel

<template>
  <div>
    <el-button @click="exportExcel" type="primary">
      <el-icon name="download" />导出为 Excel
    </el-button>
  </div>
</template>
 
<script>
import Vue from 'vue'
import pluginExport from '@d2-projects/vue-table-export'
 
Vue.use(pluginExport)
 
export default {
  data() {
    return {
      table: {
        columns: [],
        data: []
      }
    }
  },
  methods: {
    exportExcel() {
      this.$export.excel({
        columns: this.table.columns,
        data: this.table.data
      }).then(() => {
        this.$message('导出表格成功')
      })
    }
  }
}
</script>
 
<style>
</style>