web端导出excel数据供用户下载的方法。

最新推荐文章于 2024-01-11 20:34:40 发布

i疾风

最新推荐文章于 2024-01-11 20:34:40 发布

阅读量1k

点赞数 1

分类专栏：感悟随笔文章标签： webexcel生成 javascript生成excel

本文链接：https://blog.csdn.net/qq283426694/article/details/46924305

版权

本文介绍了两种在Web端导出Excel数据的方法。一种是使用JavaScript直接将表格转换为Excel，但不支持IE浏览器。另一种是通过AJAX请求后台生成Excel文件，涉及步骤包括前端发送请求、后台生成文件、通过HTTP响应传输文件流、删除临时文件以及前端接收到文件流后触发下载。在ASP.NET环境下可以实现下载，但在纯HTML页面中可能存在乱码问题。最终，作者选择使用JavaScript直接转化表格为Excel的方案。

摘要由CSDN通过智能技术生成

有两种方法来实现这个功能。一种呢，是javascript直接将table导出到excel供用户下载

 tableToExcel: (function () {
            var uri = 'data:application/vnd.ms-excel;base64,'
            , 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><meta charset="utf-8" /><!--[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>{table}</table></body></html>'
            , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }//
            , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
            return function (table, name, filename) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }

                document.getElementById("dlink").href = uri + base64(format(template, ctx));
                // document.getElementById("dlink").href = uri + ctx;
                document.getElementById("dlink").download = filename;
                document.getElementById("dlink").click();
            }
        })(),

不过上面这种方法不支持IE浏览器，标签<a>中哦那个的download属性是html5中的新属性，很遗憾不支持IE。需要对IE进行特别的操作。

 TableToExcelForIE: function (tableID) {
            this.tableBorder = -1; //边框类型，-1没有边框 可取1/2/3/4
            this.backGround = 0; //背景颜色：白色 可取调色板中的颜色编号 1/2/3/4....
            this.fontColor = 1; //字体颜色：黑色
            this.fontSize = 10; //字体大小
            this.fontStyle =