前端实现表格的导出

得助于 https://segmentfault.com/a/1190000005863250    感谢!!

采用HTML 5 新的特性download,结合 JavaScript 的Blob对象。将文本或者JS字符串信息借助Blob转换成二进制,作为<a>元素的href属性,配合download属性,实现下载。

a标签你可以提前在页面上创建,或者采用js创建,都是ok的。假设此时我已经为页面添加了a标签,并为之设置了一个id,为download 。

接下来为a标签设置href属性及download 属性:

// 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HTML文档,设置charset为urf-8以防止中文乱码
    var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("testTable").outerHTML + "</body></html>";
// 实例化一个Blob对象,其构造函数的第一个参数是包含文件内容的数组,第二个参数是包含文件类型属性的对象
	var blob = new Blob([html], { type: "application/vnd.ms-excel" });
// 利用URL.createObjectURL()方法为a元素生成blob URL
	$('#download').attr('href',URL.createObjectURL(blob)); 
// 设置文件名
	$('#download').attr('download',"XXX数据表.xls");

此时,可以检查下a标签属性值是否渲染成功。以上采用的了jquery,记得引入jquery 或者改成javascript哦~ 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值