vue中导出excel表格

在vue的项目中有个导出excel的需求 之前是后台做的给个地址进行下载。查阅了下资料，前端实现也不难，记录下来，备用。

1 安装依赖

 

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

2 安放两个js文件

在src下新建一个文件夹引入Blob.js和expor2Excal.js

3 在methods中写导出的函数

exportExcel(){
    import('@/vendor/Export2Excel').then(excel => {
		const tHeader = ['水表编号', '用户编号', '用户地址', '集中器编号', '抄表日期', 
                      '原始读数', '修正读数']
	    const filterVal = ['code', 'usn', 'position', 'concentrator', 'daytime', 
                    'lvalue', 'fixValue']
		const list = this.historyData.list
		const data = this.formatJson(filterVal, list)
		excel.export_json_to_excel({
		      header: tHeader,
		      data,
		})
   })
},
formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => {
		 return v[j]
    }))
},

其中tHeader是表头，filterVal 中的数据是表格的字段 @文件位置在src

js文件下载：https://pan.baidu.com/s/1_X2uhXSyb9xfGw87eDFGrw