JS生成excle文件

　　事情的起源是用户报告下载excel功能不能使用.

现在的业务逻辑可以理解为报表下载: 后台消耗比较多的资源生成报表数据,前台加了一些规则(比如中国式报表头), 生成了一个比较复杂的报表内容出来. 此时用户需要点击"Excel"保存为excel.

　　一直以来使用的下载方法为页面将需要下载的内容放到一个hidden服务器控件中,后台再抓取这个控件的数据,写到Response中去.

好处是不需要重新抓取数据及后台将前台生成表头的逻辑重新写一遍.

看到系统的报错信息为: Maximum request length exceeded. 页面数据太多了,无法传回服务器端.

就到网上去找JS直接下载excel的方法,修改如下:

divDataList 为报表的那个div,里面全部是html了.

 ///测试数据

           ///var html="<table><tr><td>1</td><td>2</td><td>3</td></tr></table>" 
            var html = document.getElementById("divDataList").innerHTML;          

            //////encodeURIComponent解决中文乱码
            var uri = 'data:application/octet-stream;charset=utf-8,ufeff' + encodeURIComponent(html);

            //通过创建a标签实现
            var link = document.createElement("a");
            link.href = uri;
            //对下载的文件命名
            link.download = "data.xls";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

彩蛋: 需要去掉HTML里面的input标签的全部内容,加了一个正则表达式

///测试数据

///var html="<table><tr><td><input type='checkBox'>1</td><td>2</td><td>3</td></tr></table>"

 var html = html.replace(/<input[^>]+>/g, '');

View Code

补充: 我合成的数据为128K, 结果这种方法下, 隔壁家的孩子Chrome/FireFox 能正常工作, 微软的亲儿子IE/Edge都会出错.

var html = document.getElementById("divDataList").innerHTML;

执行之后,IE/Edge 上面的语句执行之后, html为undefined, 后面就无法操作了.