vue+Element 表格导出

1、使用NPM下载:

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

2、页面使用方式

<Button type="primary" @click="exportData">导出Excel表格</Button>
//触发按钮点击下载事件
	exportData() {
		this.excelData = this.historyList;  // 将你要导出的数组数据(historyList)赋值给excelDate
		this.export2Excel(); // 调用export2Excel函数,填写表头(clomns里的type)和对应字段(historyList里的属性名)
	}//表格数据写入excel
    export2Excel() {
      var that = this;
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require("@/assets/excel/Export2Excel");  
        const tHeader = ["报名日期", "姓名",...]; // 导出的excel表头名信息
        const filterVal = [
          "date",
          "name",
          ... // 这里表示你要导出那些属性 对应书写 要与theader对应 
        ]; // 导出的excel表头字段名,需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list); 

        export_json_to_excel(tHeader, data, "学生报名信息汇总"); // 导出的表格名称,根据需要自己命名
      });
    },
    //格式转换,直接复制即可,不需要修改什么
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值