Vue 导出功能

需求：

项目需求增加导出功能

功能实现

利用XLSX插件实现导出

1. 在main.js中引用插件

import * as XLSX from 'xlsx'

Vue.prototype.$XLSX = XLSX; //设置全局

2. 在公共方法文件common.js中编写公共导出方法

/*导出
data: 导出的数据
 name:导出的表格名
 cols:导出的列
*/
Vue.prototype.exportExcel=function(data, name, cols) {
	const worksheet =  this.$XLSX.utils.json_to_sheet(data);
	this.$XLSX.utils.sheet_add_aoa(worksheet, [cols], { origin: 'A1' });
	/* 创建新的workbook并将sheet添加到workbook */
	const workbook = this.$XLSX.utils.book_new();
	this.$XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
	/* 将workbook转换为blob文件，并下载 */
	this.$XLSX.writeFile(workbook, name);
},

3. 需要实现功能的页面引用导出方法

onExport(){
	if(this.total<1){
		this.$message({ message: "请先查询数据！", type: "error" });
	}else{
		var Vuethis=this;
		this.$confirm("确定要导出Excel数据么？", { type: "warning" })
    	.then(() => {
			let cols=['时间','ID','名称','公司'];
			Vuethis.tableTitleList.forEach(item=>{
				cols.push(item.name)
			})
			let exportName='数据.xlsx';
			this.exportExcel(Vuethis.tableData,exportName,cols)
		})
	}	
},

---