js 实现纯前端将数据导出excel

最近做一个H5页面，后台问能不能在前台实现导出方法。后台返回的表头表体都是动态取的，分别返回两个数组：columns为表头，data为表体数据；

找了很多大家写的方法，最后借鉴了一种，稍有改动，原文是写死的表格数据，我在这里取得是接口返回的数据：

$.ajax({
	url: commonUrl + '/GetChooseRoomTable',
	type: 'GET',
	dataType: "json",
	data: postData,
	header: {
		'content-type': 'application/x-www-form-urlencoded',
	},
	success: (data) => {
		console.log(data.Result)
		if (!data.isError) {
			this.table_head = data.Result.columns;
			//将接口返回表头赋值给table_head数组
			this.Newarry = [];
			//处理表头数据，单独将名字拿出来
			this.table_head.forEach(item => {
				this.Newarry.push(item.display)
			}) 
			console.log(this.Newarry);
			//将接口返回表体赋值给ProcessInfo 数组
			this.ProcessInfo = data.Result.data;
        } else {
			alert(data.Result)
		}
	},
	error: () => {
	},
	complete: () => {
	}
})

导出按钮直接写一个 button 加上click 方法：

<button @click="exp()" >导出</button>

导出方法：
需要修改的地方就是表头表体赋值，其他的可以不用动；

代码：

exp(){
	// 要导出的json数据
	const jsonData = this.ProcessInfo;
	// 列标题，逗号隔开，每一个逗号就是隔开一个单元格
	let str = this.Newarry.join(",")+'\n'; //使用 \n 换行
	console.log(str);
	// 增加\t为了不让表格显示科学计数法或者其他格式
	for(let i = 0 ; i < jsonData.length ; i++ ){
		for(const key in jsonData[i]){
			str +=`${jsonData[i][key] + '\t'},`;     
		}
		str+='\n';
	}			        
	// encodeURIComponent解决中文乱码
		const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
	// 通过创建a标签实现
	const link = document.createElement("a");
	link.href = uri;
	// 对下载的文件命名
	link.download =  "数据表.csv";
	link.click();
}

原文链接：https://blog.csdn.net/hhzzcc_/article/details/80419396/