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]));
    }

你可能感兴趣的:(vue,vue.js,javascript,前端)