Element-ui,Vue表格导出生成Excel表

Vue+Element实现表单数据为Excel表

这可能是个经常见到的需求，但是实现还是很容易出问题的，首先看一下模板效果

生成的Excel表详情如图

在实现这个功能的时候需要两个文件，分别为Blob.js和Export2Excel.js文件，百度网盘下载地址：链接: https://pan.baidu.com/s/1sXMEce5MbTOvgf1yFvd5IQ 密码: qvi7 （有这两个文件），下载完成以后，创建一个新的文件夹Excel，将这两个文件放入此文件中。

1. 将两个文件下载好以后，打开Export2Excel.js，添加Blob.js的引用地址，如图，我将两个文件放在了src下新建的excel的文件夹中，所以此处的地址可根据自己实际情况进行引用。此处路径需谨慎，不然会报错。
   
   我的文件夹结构展示
   

2.代码实现

<!--给相应的按钮添加事件函数-->
<el-button @click="exportExcel()" type="danger" >导出Excel</el-button>
<!--exportExcel事件使用方法-->
exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel');   // 请求Export2Excel的文件地址，
        const tHeader = ['交货单', '客户代码', '客户名称', '状态', '付款金额','付款方式']; // tHeader的数组中存放Excel表格的每一列的标题
        const filterVal = ['DocNum', 'CardCode', 'CardName',"State",'DocTotal','PayType']; 
        //filterVal 存放需要导出到Excel表的字段名
        // 上面的DocNum、CardCode、CardName是tableData里对象的属性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);   //将数据写入到Excel表中
        /*console.log(data);     */
        export_json_to_excel(tHeader, data, '银行数据流水报表');   //生成Excel表的文件名
      })
    }

const { export_json_to_excel } = require(’@/excel/Export2Excel’); 这个地址容易出错，需要参考项目文件中build文件下的webpack.base.conf.js中的 alias 的配置，如图

其次在生成Excel表格的时候，某些字段是动态的，这个例子中的字段是“退款状态”：State，需要做判断，因此需要map数组来实现，这样嵌套不会

formatJson(filterVal, jsonData) {    //formatJson是存放导出数据字段的
      return jsonData.map(v => 
      	filterVal.map(
      		j => {
      		    //如果有需要做判断的字段条件，就做个判断，如果不需要直接return v[j];即可
      			/*if(j=='State'){
      				//假如有三种状态：已付款=1，未付款=-1，已退款=0
      				//return v[j]=='1'?'已付款':(v[j]=='-1'?'未付款':'已退款');//假如有三个状态判断条件，就这样写
      		    	return	v[j]=='-1'?'已退款':'已付款';
      				}else{
      				return v[j];
      			}*/
      			return v[j];
      		})      		
      );
    },