vue 实现excel导出功能

146 阅读1分钟

下载下载

yarn add script-loader
yarn add file-saver 
yarn add xlsx

还需要两个js文件

链接:https://pan.baidu.com/s/1jZTnIoE49whRpQSxJG42JA 
提取码:mtlu

把文件放到assets目录下面

代码如下:

<div @click="exportExcel">按钮</div>
exportExcel() {

      require.ensure([], () => {

        const { export_json_to_excel } = require('../../assets/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]));

    },