suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel einer Methode für Front-End-JS zum Drucken (Exportieren) einer Excel-Tabelle

Beispiel einer Methode für Front-End-JS zum Drucken (Exportieren) einer Excel-Tabelle

小云云
小云云Original
2018-03-07 13:06:133404Durchsuche

In diesem Artikel werden hauptsächlich Beispiele für Methoden zum Drucken (Exportieren) von Excel-Tabellen mit Front-End-JS vorgestellt. Ich hoffe, er kann Ihnen helfen.

Produktprototyp:

Picture.png

Funktionale Anforderungen: Klicken Sie auf die Schaltfläche „Anwesenheitsformular exportieren“ und es wird automatisch in Excel heruntergeladen Format

picture.png

picture.png

jsp-Seitencode: 

<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))
        }
    })()

Vollständige Demo, die kopiert und eingefügt werden kann: 

<!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>

Verwandte Empfehlungen:

Frontend HTML-Tabelle zum Generieren einer Excel-Tabelle Beispiel

Detailliertes Beispiel für die Verwendung von Javascript zum Herunterladen eines Arrays im JSON-Format in eine Excel-Tabelle

Verwenden Sie Javascript zum Exportieren Daten in HTML in eine Excel-Tabelle

Das obige ist der detaillierte Inhalt vonBeispiel einer Methode für Front-End-JS zum Drucken (Exportieren) einer Excel-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung des Prototype-Attributs von jsNächster Artikel：Detaillierte Erläuterung der Verwendung des Prototype-Attributs von js

In Verbindung stehende Artikel

Mehr sehen