前端excel导出适应中国式复杂报表

大家好,我是你们的好朋友程序猿:铭文

先简单的说下:领导给安排了一个活就是给导出excel,当时我的好朋友前端工程师他在的时候他搞的研究,研究过2个
版本。不过有一些小问题,导出的excel就是中国式报表有很多合并列的excel,和合并行的excel,后端搞得话都是一
般得npoi搞得方法。今天换2个搞得方法

一.前端页面获取页面H5。

ps:主要是获取了outerHTML,里面有注释非常得简单。不会得话没看明白得话私聊。

   
   <script>
           		// 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HTML文档,设置charset为urf-8以防止中文乱码
			var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("Table标签ID").outerHTML + "</body></html>";
			// 实例化一个Blob对象,其构造函数的第一个参数是包含文件内容的数组,第二个参数是包含文件类型属性的对象
			var blob = new Blob([html], {
				type: "application/vnd.ms-excel"
			});
			 var info = document.getElementById("a 标签ID");
			// 利用URL.createObjectURL()方法为a元素生成blob URL
			info.href = URL.createObjectURL(blob);
			// 设置文件名,目前只有Chrome和FireFox支持此属性
			info.download = "Excel名字.xls";
			
			  //打印具体实现代码
           function printout() {
           		debugger;
                var newWindow;
                //打开一个新的窗口  
                newWindow = window.open();
                // 是新窗口获得焦点  
                newWindow.focus();
                //保存写入内容  
                var newContent = "<html><head><meta charset='utf-8'/><title>打印</title></head><body>"
                newContent += document.getElementById("Table标签ID").outerHTML;
                newContent += "</body></html>"
                // 将HTML代码写入新窗口中  
                newWindow.document.write(newContent);
                newWindow.print();
                // close layout stream 
                newWindow.document.close();
                //关闭打开的临时窗口
                newWindow.close();
                return false;
           };
		</script>

二.用一个插件来写非常得简单:js-xlsx

链接: 下载地址.
官方github: 连接地址.
xlsx.core.min.jsx(读取对象封装)
xlsx.full.min.js(包含了所有功能模块。)
JS-xlsx详细解释(这个人写的非常详细大家可以参考): 连接地址.
最后总结下:其实着2个第一个和第二个都是获取得 前端得H5来进行得导出。也可以看看我第一个连接得下载地址:里面就是读取table节点下得tr,td 得这些属性。非常得简单。容易操作。不会的可以联系我欢迎你的咨询。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一个武术猴子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值