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>
版权声明:本文为wangjae原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。