纯前端js代码实现导出excel功能

代码大致的逻辑是

  1. 请求后端接口获取数据
  2. 将获取到的数据转为table
  3. table格式对应导出的excel表格的格式,下面只是一个简单的例子,更复杂的table格式可以自行去修改
  4. 进行转码导出
			exportExcel() {
				//this.loading = true;
				this.$message.warning("数据导出中,请耐心等待...");
				//请求后端接口,获取数据进行导出
				this.$api.exportExcel().then(
					({
						data
					}) => {
						var tableData = data.data;
						this.getrank(tableData);
						var str = '';
						str +=
							'<tr><th>姓名</th><th>班级</th><th>年龄</th></tr>';
						//循环遍历数据,每行加入tr标签,每个单元格加td标签
						for (let i = 0; i < tableData.length; i++) {
							str += '<tr>';
							str += `<td>${ tableData[i].name + '\t'}</td>`;
							str += `<td>${ tableData[i].class + '\t'}</td>`;
							str += `<td>${ tableData[i].age + '\t'}</td>`;
							str += '</tr>';
						}
						var worksheet = 'Sheet1'; //Worksheet名
						var uri = 'data:application/vnd.ms-excel;base64,';
						//下载的表格模板数据(固定不用修改)
						var template =
							`<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
										              <x:Name>${worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>${str}</table></body></html>`;
						//下载模板
						// window.location.href = uri + this.base64(template)
						var link = document.createElement("a");
						link.href = uri + this.base64(template);
						link.download = '文件名' + ".xls";
						link.style = "visibility:hidden";
						document.body.appendChild(link);
						link.click();
						document.body.removeChild(link);
						console.log("导出成功-----");
						//this.loading = false;
					},
					err => {
						this.$message.error("导出失败!");
						//this.loading = false;
					}
				);
			},
			base64(s) {
				return window.btoa(unescape(encodeURIComponent(s)))
			},
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 Kendo UI默认导出的是该列的value值,及查出来的值,有时候我们会用template渲染一下导出的列,比如将“Y”显示成“是”,把“N”显示成“否”。而Kendo UI导出的却是Y/N这种只有程序员看得懂的数据库标识,显然不是我们需要的,这种情况非常常见。 2. 不能灵活控制可导出的列 Kendo UI的Excel导出主要看两点,一是该列(column)是field字段,而不是自定义的name;二是该列不是隐藏的(hidden:true)。这样我们无法灵活导出我们需要的列。 为了解决上面两个问题,我查看了Kendo UI的源代码,提取并改进了源代码。主要更改点及使用方法请看下面源代码。主要针对以上两点做了更改,只需要在grid定义columns时加上isExport或exportTemplate即可: 在导出数据,先看该列有没有自定义exportTemplate(),没有则看Kendo UI自带的template(),再没有才会导出查出来的值。 判断是否导出该列不再看hidden属性,而是看列的isExport属性,如果为false则不导出,其它情况一律导出该列。 经过这两个更改,基本可以应对所有业务场景,可以方便快捷地开发了! 但要注意,Kendo UI自带的导出功能无法应用于导出大量数据,似乎是浏览器的jvm溢出了,建议超过5万条的数据导出还是老老实实写后台导出功能吧。。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值