Excel导出功能

1. 前端处理导出数据

1.安装xlsx：npm install xlsx file-saver -S
2.在使用的页面导入：import XLSX from "xlsx"
3.导出事件

exportEvent(){
	let arrayData = []; //声明一个空数组来装数据导出的数据
	this.tableData.map((item) => {//遍历this.tableData从中拿需要的数据
		arrayData.push([ //往空数组中追加
		  item.id,
		  item.title,
   		  item.type,
		  item.status,
		])
	});
	var data = [["标题"，null，null],["优惠券ID", "名称","类型", "状态"], ...arrayData]; //Excel表头和以下数据，此处需为二维数组
	var xlsx_name = "Sheet1"; //设置Excel第一个sheet的名称
		 var wb = XLSX.utils.book_new();
		 var ws = XLSX.utils.aoa_to_sheet(data);  //数据转换
		ws['!merges'] = [
			// 设置单元格合并，r表示行，c表示列，这里为第一行中的1-4单元格合并
			{s: {r: 0, c: 0}, e: {r: 0, c: 4}},
		];
			// 设置第二行宽度
		 ws["!cols"]=[null, {wpx:130}]
		 XLSX.utils.book_append_sheet(wb, ws, xlsx_name); //将数据添加到工作薄
		 XLSX.writeFile(wb, "统计信息.xlsx"); //导出Excel  第二个参数为文件名称
}

2.前端处理后台返回的Excel导出数据流封装

请求后台，需要设置responseType类型为"blob"，获取到返回来的数据流：

axios请求，需要设置请求头为responseType:'blob'，后台返回文件流后再调用此方法

/*
 * 导出文件
 * @data 后台返回的数据流
 * @fileName 导出的文件名
*/
export function exportFile(data, fileName) {
  // 将后台回传过来的文件流，通过将其转成blob对象 type为设置文件类型，
    let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
	if ('download' in document.createElement('a')) { // 非IE下载
		  const link = document.createElement('a')
		  link.style.display = 'none'
		  //  创建一个临时url指向blob对象,给a标签的href属性
		  link.href = URL.createObjectURL(blob) //获取当前文件blob的一个内存URL
		  link.download = fileName // 设置下载文件名称
		  document.body.appendChild(link)
		  link.click()
		  URL.revokeObjectURL(dlink.href) // 释放URL 对象
		  document.body.removeChild(link) //释放临时对象
	}else{ // IE10+下载
		  navigator.msSaveBlob(blob, fileName)
	}

}

待续。。。