js导出excel兼容各个主流浏览器

最新推荐文章于 2024-02-21 22:34:40 发布
最新推荐文章于 2024-02-21 22:34:40 发布
阅读量3.1k 收藏 4
点赞数 2
分类专栏： js 文章标签： 导出excel javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34117170/article/details/76586694
版权

废话不多说直接上代码

<html>
<head>
<script type="text/javascript" language="javascript">
        var idTmr;
        function  getExplorer() {
            var explorer = window.navigator.userAgent ;
            //ie 
            if (explorer.indexOf("MSIE") >= 0) {
                return 'ie';
            }
            //firefox 
            else if (explorer.indexOf("Firefox") >= 0) {
                return 'Firefox';
            }
            //Chrome
            else if(explorer.indexOf("Chrome") >= 0){
                return 'Chrome';
            }
            //Opera
            else if(explorer.indexOf("Opera") >= 0){
                return 'Opera';
            }
            //Safari
            else if(explorer.indexOf("Safari") >= 0){
                return 'Safari';
            }
        }
        function method1(tableid) {//整个表格拷贝到EXCEL中
            if(getExplorer()=='ie')
            {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");

                //创建AX对象excel 
                var oWB = oXL.Workbooks.Add();
                //获取workbook对象 
                var xlsheet = oWB.Worksheets(1);
                //激活当前sheet 
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                //把表格中的内容移到TextRange中 
                sel.select;
                //全选TextRange中内容 
                sel.execCommand("Copy");
                //复制TextRange中内容  
                xlsheet.Paste();
                //粘贴到活动的EXCEL中       
                oXL.Visible = true;
                //设置excel可见属性

                try {
                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
                } catch (e) {
                    print("Nested catch caught " + e);
                } finally {
                    oWB.SaveAs(fname);

                    oWB.Close(savechanges = false);
                    //xls.visible = false;
                    oXL.Quit();
                    oXL = null;
                    //结束excel进程，退出完成
                    //window.setInterval("Cleanup();",1);
                    idTmr = window.setInterval("Cleanup();", 1);

                }

            }
            else
            {
                tableToExcel(tableid)
            }
        }
        function Cleanup() {
            window.clearInterval(idTmr);
            CollectGarbage();
        }
        var 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><!--[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) 
                {
                        if (!table.nodeType) {
                           table = document.getElementById(table) 
                        }
                        var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
                        window.location.href = uri + base64(format(template, ctx))
                }
            })()
    </script>

</head>
<body>
<table id="WDL">
  <tr>
    <td>1</td>
    <td>WDL</td>
    <td>23</td>
    <td>134242</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>2</td>
    <td>YY</td>
    <td>23</td>
    <td>134242</td>
    <td>北京</td>
  </tr>
</table>
<input id="Button1" type="button" value="导出EXCEL" 
        onclick="javascript:method1('WDL')" />
</body>
</html>

以上代码只能导出当前页，上边代码是网上找的，
研究之后发现，想导出全部数据也很简单，只需要ajax请求数据，然后组装后把值赋值给table

 var ctx = {worksheet: name || 'Worksheet', table: 123//此处写ajax请求数据组装后的内容，比如是123，导出就是123}

但导出所有数据一般应该后端来写，要不会很慢
有不足之处还望之处

追加，发现这个不能指定文件名，我们可以利用a 标签的download属性
具体代码如下

<html>
<head>
 <meta charset="utf-8">

<script type="text/javascript" language="javascript">
        var idTmr;
        function  getExplorer() {
            var explorer = window.navigator.userAgent ;
            //ie 
            if (explorer.indexOf("MSIE") >= 0) {
                return 'ie';
            }
            //firefox 
            else if (explorer.indexOf("Firefox") >= 0) {
                return 'Firefox';
            }
            //Chrome
            else if(explorer.indexOf("Chrome") >= 0){
                return 'Chrome';
            }
            //Opera
            else if(explorer.indexOf("Opera") >= 0){
                return 'Opera';
            }
            //Safari
            else if(explorer.indexOf("Safari") >= 0){
                return 'Safari';
            }
        }
        function method1(tableid) {//整个表格拷贝到EXCEL中
            if(getExplorer()=='ie')
            {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");

                //创建AX对象excel 
                var oWB = oXL.Workbooks.Add();
                //获取workbook对象 
                var xlsheet = oWB.Worksheets(1);
                //激活当前sheet 
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                //把表格中的内容移到TextRange中 
                sel.select;
                //全选TextRange中内容 
                sel.execCommand("Copy");
                //复制TextRange中内容  
                xlsheet.Paste();
                //粘贴到活动的EXCEL中       
                oXL.Visible = true;
                //设置excel可见属性

                try {
                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
                } catch (e) {
                    print("Nested catch caught " + e);
                } finally {
                    oWB.SaveAs(fname);

                    oWB.Close(savechanges = false);
                    //xls.visible = false;
                    oXL.Quit();
                    oXL = null;
                    //结束excel进程，退出完成
                    //window.setInterval("Cleanup();",1);
                    idTmr = window.setInterval("Cleanup();", 1);

                }

            }
            else
            {
                tableToExcel(tableid)
            }
        }
        function Cleanup() {
            window.clearInterval(idTmr);
            CollectGarbage();
        }
        var 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><!--[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) 
                {

                        if (!table.nodeType) {
                           table = document.getElementById(table) 
                        }
                        var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
                        // window.location.href = uri + base64(format(template, ctx))
                        document.getElementById("Awdl").href = uri + base64(format(template, ctx));
                        document.getElementById("Awdl").click();
                }
            })()
    </script>

</head>
<body>
<table id="wdl">
  <tr>
    <td>1</td>
    <td>WDL</td>
    <td>23</td>
    <td>134242</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>2</td>
    <td>YY</td>
    <td>23</td>
    <td>134242</td>
    <td>北京</td>
  </tr>
</table>
<a id="Awdl"  style="display:none;" download="WDL.xls"></a>
<input id="Button1" type="button" value="导出EXCEL" 
        onclick="javascript:method1('wdl')" />
</body>
</html>

至此基本到处excel已实现

DenggLin
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
js导出excel文件，支持chrome、ie、firefox等主流浏览器
09-04
js导出excel文件，支持chrome、ie、firefox等主流浏览器 js导出excel文件，支持chrome、ie、firefox等主流浏览器
javaScript 实现表格数据导出为Excel 兼容Mac
日常笔记/总结/系列知识梳理
03-09 1014
index.html &lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;表格导出&lt;/title&gt; &lt;style type="text/css"&gt; button{ padding: 10px 5px; font-size
前端导出Excel？使用js/ts导出Excel？背景色、指定单元格合并等高定制化？选它——Exceljs
最新发布
weixin_46086458的博客
02-21 965
这篇文章我首先是在掘金中发出来的，期间也收获了一些朋友们的支持，同时也是觉得 exceljs 这个工具库在鱼龙混杂的前端excel导出、js导出excel等工具下是非常好的一个。不需要担心是vue还是react还是nodejs环境，它统统能做。特此也在此发布一下，希望能帮到更多的朋友。
如何使用JavaScript实现纯前端读取和导出excel文件
时清云的博客
11-18 2566
由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。普通版本不支持定义字体、颜色、背景色等，有这个功能需要的可以使用pro版，好像是要收费的，因为官网没看到下载地址。
原生js导出Excel表格，兼容ie
weixin_47278755的博客
04-12 554
写在前：找的别人的轮子自己修改，原文具体出处无法考证。：原文导出时，无法修改文件名。本人修改后已解决问题：js代码不能直接放置于html页面当中，会导致初始化错误，建议以script标签引入。：如果在非ie情况下，导出的Excel默认是没有网格线的，以wps为例，在【视图】菜单，需要手动开启一下网格线。其余操作正常。：ie浏览器导出方式，默认是打开Excel相关软件，手动保存。目前测试在ie5环境也能导出。
blob导出html,JS导出Excel（使用Blob），兼容IE，且保留样式
weixin_34116482的博客
06-22 712
JS实现html导出Excel，兼容IE浏览器方法一：$("#tableID").first().tableToExcel();------------------------------------------------------------------------------------------------------------------------------方法二：var ta...
html导出excel 兼容Ie,Firefox,Chrome浏览器
zianY的博客
01-05 1789
开始 var idTmr; function getExplorer() { var explorer = window.navigator.userAgent ; //ie if (explorer.indexOf("MSIE") >= 0) { r
Html导出Excel文件(兼容所有浏览器)
11-01
Html导出Excel文件(兼容所有浏览器)Html导出Excel文件(兼容所有浏览器)
怎么把html表格转化为excel,导出html到excel表格数据格式-如何将html转换成excel
weixin_35947806的博客
06-29 9729
如何将html转换成excel一：Html转为Excel1我们打开网络上的一个包含表格内容的页面，点击菜单栏-文件-另存为。2弹出窗口选择保存路径，将保存类型选为“htm 或Html格式”。3在计算机上新建一个Excel文件并打开，点击菜单栏-数据-导入外部数据-导入数据。4找到刚才保存的“Html”单击打开，再单击“导入”。5在弹出的“导入数据”窗口中你可以选择“现有工作表”或者“新建工作表”，...
js导出数据到excel，兼容ie浏览器
qq_36159785的博客
01-09 5039
建立Excle导出的js文件，在需要前台导出的页面中引用此js，调用methodExcel(tableid)方法，tableid为需要导出到excel的table表id。 将页面上的table显示内容复制到excel中，只能导出本页数据，如果是分页数据的话，不能导出下一页的内容。 此方法适用于复杂表头的简单内容导出，对google内核支持较好。 测试发现IE9无法兼容，需要设置安全等级，已作出页面...
js导出Excel浏览器兼容
Sugar_沫沫的专栏
12-11 1724
【代码】js导出Excel浏览器兼容。
js浏览器导出Excel[兼容所有浏览器]
09-14
本zip包主要是为了到处html页面中的table表格而设计的demo。可以参考文件里的Hello.html和testdao.html两个，经过本人测试都可以导出Excel。IE导出的效果反而比Google浏览器的好看。IE测试版本11.1715.14393.0。
JS导入导出Excel 兼容IE、Firefox、Chrome等浏览器
05-10
超好用的js操作Excel实现数据导入导出JS包。只需引入JS包即可完成功能开发。压缩包中有Demo，参照编写即可。
JavaScript HTML内容导出Excel兼容所有浏览器
02-25
IE浏览器下是将内容复制到Excel，需用户手动保存Excel文档 非IE浏览器可直接导出Excel文件
纯HTML代码块导出Excel文件，用jquery库（兼容所有浏览器，支持设置文件名）
11-06
纯HTML代码块导出Excel文件，用jquery库（兼容所有浏览器，支持设置文件名） IE还没仔细测试过。大家可以试试
JS 读取Excel文件(xls) 兼容Chrome/IE/Firefox
06-26
JS 读取Excel文件(xls) 兼容Chrome/IE/Firefox 文章配套工具
js导出excel 支持各主流浏览器
08-02
js导出excel 支持各主流浏览器,支持指定文件名
js导出excel兼容IE6+和主流浏览器
05-27
Javascript导出excel为xlsx格式，兼容IE6+和主流浏览器，下载下来直接可以使用。 其他javascript导出excel插件可看作者文章：https://blog.csdn.net/qq_21693027/article/details/80459677
JS导出excel兼容IE6+、主流浏览器、支持复杂表头和单元格合并
05-27
Javascript导出excel为xlsx格式，兼容IE6+和主流浏览器，下载下来直接可以使用。 其他javascript导出excel插件可看作者文章：https://blog.csdn.net/qq_21693027/article/details/80459677

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值