码迷,mamicode.com
首页 > Web开发 > 详细

html table导出到Excel中,不走后台,js完成

时间:2019-04-25 11:43:33      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:work   new   final   java   file   type   offic   click   display   

静态表格table

<table class="table tableStyles" id="tables">
        <caption>不正经的统计表</caption><!--可以生成表格的标题-->
        <thead>
            <tr>
                <th>品牌</th>
                <th>门店</th>
                <th>本周回访</th>
                <th>本月回访</th>
                <th>总回访</th>
                <th>本周成交数</th>
                <th>本月成交数</th>
                <th>总成交数</th>
                <th>异常量</th>
                <th>成交转化率</th>
                <th>经手人/th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">华为</td>
                <td>华为深圳店</td>
                <td>20</td>
                <td>80</td>
                <td>500</td>
                <td>1</td>
                <td>3</td>
                <td>20</td>
                <td>1</td>
                <td>4.0%</td>
                <td>黄生</td>
            </tr>
            <tr>
                <td>华为东莞店</td>
                <td>20</td>
                <td>80</td>
                <td>500</td>
                <td>1</td>
                <td>3</td>
                <td>20</td>
                <td>1</td>
                <td>4.0%</td>
                <td>黄生</td>
            </tr>
            <tr>
                <td>华为佛山店</td>
                <td>20</td>
                <td>80</td>
                <td>500</td>
                <td>1</td>
                <td>3</td>
                <td>20</td>
                <td>1</td>
                <td>4.0%</td>
                <td>黄生</td>
            </tr>
            <tr>
                <td rowspan="3">小米</td>
                <td>米家深圳店</td>
                <td>20</td>
                <td>80</td>
                <td>500</td>
                <td>1</td>
                <td>3</td>
                <td>20</td>
                <td>1</td>
                <td>4.0%</td>
                <td>林生</td>
            </tr>
        </tbody>
    </table>

2.Js代码

①利用html5的download属性,点击下载该文件

<a id="dlink"  style="display:none;"></a>
<input type="button" onclick="tableToExcel(‘tables‘, ‘name‘, ‘myfile.xls‘)" value="Export to Excel">
<script type="text/javascript">
        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, 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").download = filename;
                document.getElementById("dlink").click();
            }
        })()
    </script>

 

②创建ActiveXObject对象复制到表格中

1 <input id="Button1" type="button" value="导出EXCEL" onclick="javascript:excels(‘tables‘)" />
<script type="text/javascript">
        var timer;
        function getExplorer(){//获取浏览器
            var explorer=window.navigator.userAgent;
            if(explorer.indexOf("MSIE") >= 0|| (explorer.indexOf("Windows NT 6.1;") >= 0 && explorer.indexOf("Trident/7.0;") >= 0)){
                return ‘ie‘;
            }else if (explorer.indexOf("Firefox") >= 0) {
                return ‘Firefox‘;
            }else if(explorer.indexOf("Chrome") >= 0){
                return ‘Chrome‘;
            }else if(explorer.indexOf("Opera") >= 0){
                return ‘Opera‘;
            }else if(explorer.indexOf("Safari") >= 0){
                return ‘Safari‘;
            }
        }
        function excels(table){
            if(getExplorer()==‘ie‘){
                var curTbl = document.getElementById(table);
                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 filename = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
                }catch(e){
                    window.print("Nested catch caught " + e);
                }finally{
                    oWB.SaveAs(filename);
                    oWB.Close(savechanges = false);
                    oXL.Quit();
                    oXL = null;//结束excel进程,退出完成
                    timer = window.setInterval("Cleanup();", 1);
                }
            }else{
                tableToExcel("tables");
            }
        }
        function Cleanup(){
            window.clearInterval(timer);
            CollectGarbage();//CollectGarbage,是IE的一个特有属性,用于释放内存的
        }
        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>

①.真正起到作用的是a标签的属性,input按钮只是起到了一个过渡到download属性的作用;

    其中有编码解码,需要注意中文乱码情况;

    测试只有谷歌和火狐起作用,且只有谷歌下载的文件名是“下载.xls”,火狐的文件名像是编码后的~

 双核浏览器当然也只有chrome内核下有效果~~

 

还有其他的问题是我继续需要想的,表格内容分页情况导出?筛选条件后导出全部?等等等~

附上源码注释地址:https://github.com/Chuyue0/javascript-demo/blob/master/tableExporeExcel.html

 开发过程中有很多预料不到的事,继续加油吧!

 

~~~~~~~~~~~~剩到最后的解决办法是利用插件~~~~~~~~~~~~

比如github上的

1020 Star:https://github.com/kayalshri/tableExport.jquery.plugin

270 Star:https://github.com/clarketm/TableExport

159 Star:https://github.com/huanz/tableExport

说明一下,星星多的插件是有base64编码,所以还额外需要js脚本!

个人比较喜欢最少星星的库,感觉明了清晰,可以按需加载~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

原创地址

 

html table导出到Excel中,不走后台,js完成

标签:work   new   final   java   file   type   offic   click   display   

原文地址:https://www.cnblogs.com/lubolin/p/10767355.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!