vue中实现表格导出

1.安装

npm install -S file-saver xlsx
npm install -D script-loader

2.下载excel包（在utils文件夹中放入excel）
链接: https://pan.baidu.com/s/1QkBmaLBLl9bqGNITjkma3Q 提取码: 2ycf

3.在需要的页面中使用

首先给按钮绑定一个点击事件

其次书写相应的js代码

<script>
export default {
     
     
  name: "excel",
  data() {
     
     
    return {
     
     
      tableData: [
        {
     
      index: "0", nickName: "卑微打工人", name: "小四" },
        {
     
      index: "1", nickName: "小仙女", name: "小五" },
        {
     
      index: "2", nickName: "索隆", name: "小六" },
      ],
    };
  },
  methods: {
     
     
    //导出的方法
    exportExcel() {
     
     
      require.ensure([], () => {
     
     
        const {
     
      export_json_to_excel } = require("@/utils/excel/Export2Excel");
        const tHeader = ["序号", "昵称", "姓名"];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ["index", "nickName", "name"];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.tableData; //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "列表excel");
      });
    },

    formatJson(filterVal, jsonData) {
     
     
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>

注意引入路径：require("@/utils/excel/Export2Excel")
效果图如下

虽然下载成功但是会报错：

解决方法：
将excel文件夹下的Export2Excel.js的此段代码改成如下图即可