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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>js实现一键导出Excel</title>
  6. </head>
  7. <body>
  8. <div class="container">
  9. <table id="backViewTable" class="table table-hover table-sm table2excel">
  10. <tr>
  11. <td>#</td>
  12. <td>ID</td>
  13. <td>姓名</td>
  14. <td>座位号</td>
  15. <td>操作</td>
  16. </tr>
  17. <tr>
  18. <th scope="row">1</th>
  19. <td>1234</td>
  20. <td>李文斐</td>
  21. <td>2楼 3排 34号 </td>
  22. <td><input class="btn-primary" type="button" value="删除"/></td>
  23. </tr>
  24. <tr>
  25. <th scope="row">2</th>
  26. <td>2345</td>
  27. <td>lwf</td>
  28. <td>1楼 3排 34号</td>
  29. <td><input class="btn-primary" type="button" value="删除"/></td>
  30. </tr>
  31. <tr>
  32. <th scope="row">3</th>
  33. <td>3456</td>
  34. <td>Lee</td>
  35. <td>1楼 3排 12号</td>
  36. <td><input class="btn-primary" type="button" value="删除"/></td>
  37. </tr>
  38. </table>
  39. <button class="btn btn-primary btn-sm" onclick="tablesToExcel([\'backViewTable\'], [\'ProductDay1\'], \'TestBook.xls\', \'Excel\')">Export to Excel</button>
  40. </div>
  41. </body>
  42. <script>
  43. var tablesToExcel = (function() {
  44. var uri = \'data:application/vnd.ms-excel;base64,\'
  45. , 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">\'
  46. + \'<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>\'
  47. + \'<Styles>\'
  48. + \'<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>\'
  49. + \'<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>\'
  50. + \'</Styles>\'
  51. + \'{worksheets}</Workbook>\'
  52. , tmplWorksheetXML = \'<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>\'
  53. , tmplCellXML = \'<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>\'
  54. , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
  55. , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
  56. return function(tables, wsnames, wbname, appname) {
  57. var ctx = "";
  58. var workbookXML = "";
  59. var worksheetsXML = "";
  60. var rowsXML = "";
  61. for (var i = 0; i < tables.length; i++) {
  62. if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
  63. //控制要导出的行数
  64. for (var j = 0; j < tables[i].rows.length; j++) {
  65. rowsXML += \'<Row>\';
  66. //控制导出的列数(在本例中,最后一列为button,导出的文件会出错,所以导出到倒数第二列
  67. for (var k = 0; k < tables[i].rows[j].cells.length-1; k++) {
  68. var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
  69. var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
  70. var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
  71. dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
  72. var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
  73. dataFormula = (dataFormula)?dataFormula:(appname==\'Calc\' && dataType==\'DateTime\')?dataValue:null;
  74. ctx = { attributeStyleID: (dataStyle==\'Currency\' || dataStyle==\'Date\')?\' ss:StyleID="\'+dataStyle+\'"\':\'\'
  75. , nameType: (dataType==\'Number\' || dataType==\'DateTime\' || dataType==\'Boolean\' || dataType==\'Error\')?dataType:\'String\'
  76. , data: (dataFormula)?\'\':dataValue
  77. , attributeFormula: (dataFormula)?\' ss:Formula="\'+dataFormula+\'"\':\'\'
  78. };
  79. rowsXML += format(tmplCellXML, ctx);
  80. }
  81. rowsXML += \'</Row>\'
  82. }
  83. ctx = {rows: rowsXML, nameWS: wsnames[i] || \'Sheet\' + i};
  84. worksheetsXML += format(tmplWorksheetXML, ctx);
  85. rowsXML = "";
  86. }
  87. ctx = {created: (new Date()).getTime(), worksheets: worksheetsXML};
  88. workbookXML = format(tmplWorkbookXML, ctx);
  89. // 查看后台的打印输出
  90. console.log(workbookXML);
  91. var link = document.createElement("A");
  92. link.href = uri + base64(workbookXML);
  93. link.download = wbname || \'Workbook.xls\';
  94. link.target = \'_blank\';
  95. document.body.appendChild(link);
  96. link.click();
  97. document.body.removeChild(link);
  98. }
  99. })();
  100. </script>
  101. </html>

 

版权声明:本文为wangjae原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/wangjae/p/9149307.html