zoukankan      html  css  js  c++  java
  • js实现一键导出Excel

    演示地址:https://xibushijie.github.io/static/ExportToExcel.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js实现一键导出Excel</title>
    </head>
    <body>
        <div class="container">
            <table id="backViewTable" class="table table-hover table-sm table2excel">
                <tr>
                    <td>#</td>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>座位号</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>1234</td>
                    <td>李文斐</td>
                    <td>2楼 3排 34号 </td>
                    <td><input class="btn-primary" type="button" value="删除"/></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>2345</td>
                    <td>lwf</td>
                    <td>1楼 3排 34号</td>
                    <td><input class="btn-primary" type="button" value="删除"/></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>3456</td>
                    <td>Lee</td>
                    <td>1楼 3排 12号</td>
                    <td><input class="btn-primary" type="button" value="删除"/></td>
                </tr>
            </table>
            <button class="btn btn-primary btn-sm" onclick="tablesToExcel(['backViewTable'], ['ProductDay1'], 'TestBook.xls', 'Excel')">Export to Excel</button>
        </div>
    </body>
    <script>
        var tablesToExcel = (function() {
            var uri = 'data:application/vnd.ms-excel;base64,'
                , tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'
                + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>'
                + '<Styles>'
                + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>'
                + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>'
                + '</Styles>'
                + '{worksheets}</Workbook>'
                , tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>'
                , tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>'
                , 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(tables, wsnames, wbname, appname) {
                var ctx = "";
                var workbookXML = "";
                var worksheetsXML = "";
                var rowsXML = "";
    
                for (var i = 0; i < tables.length; i++) {
                    if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
    
                    //控制要导出的行数
                    for (var j = 0; j < tables[i].rows.length; j++) {
                        rowsXML += '<Row>';
    
                    //控制导出的列数(在本例中,最后一列为button,导出的文件会出错,所以导出到倒数第二列
                        for (var k = 0; k < tables[i].rows[j].cells.length-1; k++) {
                            var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
                            var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
                            var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
                            dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
                            var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
                            dataFormula = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null;
                            ctx = {  attributeStyleID: (dataStyle=='Currency' || dataStyle=='Date')?' ss:StyleID="'+dataStyle+'"':''
                                , nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String'
                                , data: (dataFormula)?'':dataValue
                                , attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':''
                            };
                            rowsXML += format(tmplCellXML, ctx);
                        }
                        rowsXML += '</Row>'
                    }
                    ctx = {rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i};
                    worksheetsXML += format(tmplWorksheetXML, ctx);
                    rowsXML = "";
                }
    
                ctx = {created: (new Date()).getTime(), worksheets: worksheetsXML};
                workbookXML = format(tmplWorkbookXML, ctx);
    
                // 查看后台的打印输出
                console.log(workbookXML);
    
                var link = document.createElement("A");
                link.href = uri + base64(workbookXML);
                link.download = wbname || 'Workbook.xls';
                link.target = '_blank';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        })();
        </script>
    </html>
  • 相关阅读:
    [JLOI2011] 飞行路线
    高精度运算模板
    Dijkstra算法模板
    [SDOI2010] 外星千足虫
    [SDOI2006] 线性方程组
    [CTSC2014] 企鹅QQ
    模板三连击:树状数组+线段树+主席树
    [ZJOI2008] 树的统计
    [国家集训队] 礼物
    [洛谷P4720] [模板] 扩展卢卡斯
  • 原文地址:https://www.cnblogs.com/wangjae/p/9149307.html
Copyright © 2011-2022 走看看