Vue导出Excel表格数据

背景：现在的项目需要做这个功能，之前没有处理过，记录下来方便查看。

第一步：安装依赖包

npm install  file-saver 

npm install xlsx

npm install script-loader

第二步：新建js文件夹，也可以命名为excel，用于存放Blob.js和Export2Excel.js两个js文件

image.png

第三步：具体的使用方法

主要是两个方法，之前我看的是别人的方法（方法二），但是因为vue-cli版本不同无法识别require.ensure的写法，所以自己琢磨了下改为方法一，也能实现。

方法一：表格数据序号返回，需要自己手动添加序号

exportToExcel() {
    //手动添加序号至表格中
  const dataTable = JSON.parse(JSON.stringify(this.accountAllTable))
    for (let i = 0; i < dataTable.length; i++) {
         dataTable[i].index = i + 1;
    }
    const { export_json_to_excel } = require('./js/Export2Excel');
    const tHeader = [
          '序号',
          '账户ID',
          '账户名',
          '客户名称',
          '客户类型',
          '国家地区',
          '区号',
          '手机号码',
          '邮箱',
          '账号类型',
          '状态',
          '注册时间'
         ];
     const filterVal = [
           'index',
           'accountId',
            'accountName',
            'customerName',
            'accounType',
            'country',
            'region',
            'mobile',
            'email',
            'accountPortfolioTypeDest',
            'status',
            'createDate'
           ];
       const data = this.formatJson(filterVal, dataTable);
       export_json_to_excel(tHeader, data, '账户信息列表');
},
formatJson(filterVal, jsonData) {
     return jsonData.map(v => filterVal.map(j => v[j]));
}

方法二：

exportToExcel() {
        //excel数据导出
        require.ensure([], () => {
            const {
                export_json_to_excel
            } = require('../../assets/js/Export2Excel');
            const tHeader = ['序号','省份', '投资总额', '收益总额', '主要投资项目','投资周期', '投资人数', '投资年变化率','备注'];
            const filterVal = ['index','provinces', 'orderMoney', 'incomeMoney', 'payType','orderPeriod', 'orderPersonConunt', 'orderYearRate', 'remarks'];
            const list = this.tableData;
            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]))
    }

第四步：

在html页面使用：添加exportToExcel()方法

html代码.png

以上就是全部步骤~~