search

Home  >  Article  >  Web Front-end  >  Method example of front-end js printing (exporting) excel table

Method example of front-end js printing (exporting) excel table

小云云
小云云Original
2018-03-07 13:06:133405browse

This article mainly shares with you examples of methods for printing (exporting) excel tables with front-end js. I hope it can help you.

Product prototype:

Picture.png

Functional requirements: Click the Export Attendance Form button and it will be automatically downloaded into Excel format

Picture.png

Picture.png

jsp page code: 

<p class="tools"><button type="button" class="btn green" id="excell"  onclick="method5(&#39;dataTable&#39;)">导出考勤表</button></p>

js code

//打印表格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 method5(tableid) {        if (getExplorer() == 'ie') {            var curTbl = document.getElementById(tableid);            var oXL = new ActiveXObject("Excel.Application");            var oWB = oXL.Workbooks.Add();            var xlsheet = oWB.Worksheets(1);            var sel = document.body.createTextRange();
            sel.moveToElementText(curTbl);
            sel.select();
            sel.execCommand("Copy");
            xlsheet.Paste();
            oXL.Visible = true;            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);
                oXL.Quit();
                oXL = null;
                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><head><meta charset="UTF-8"></head><body><table  border="1">{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))
        }
    })()

Complete demo that can be copied and pasted:

<!DOCTYPE html><html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <p class="tools">
            <button type="button" class="btn green" id="excell" onclick="method5(&#39;dataTable&#39;)">导出考勤表格</button>
        </p>

        <table border="1" id="dataTable">
            <tr>
                <td>王婷111</td>
                <td>一见倾城333 </td>
            </tr>
            <tr>
                <td>祈澈姑娘222</td>
                <td>Python开发者交流平台44</td>
            </tr>
            <tr>
                <td>wwwangting888</td>
                <td>13661725475</td>
            </tr>
        </table>

    </body>
    <script>
        //打印表格
        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 method5(tableid) {            if(getExplorer() == 'ie') {                var curTbl = document.getElementById(tableid);                var oXL = new ActiveXObject("Excel.Application");                var oWB = oXL.Workbooks.Add();                var xlsheet = oWB.Worksheets(1);                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                sel.select();
                sel.execCommand("Copy");
                xlsheet.Paste();
                oXL.Visible = true;                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);
                    oXL.Quit();
                    oXL = null;
                    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><head><meta charset="UTF-8"></head><body><table  border="1">{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></html>

Related recommendations:

Front-end html table generation excel table example

Example detailed explanation javascript downloads json format array into excel table

Use javscript to export data in html to excel table

The above is the detailed content of Method example of front-end js printing (exporting) excel table. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of the usage of Prototype attribute of jsNext article：Detailed explanation of the usage of Prototype attribute of js

Related articles

See more