前端导出表格

港控/mmm° 2021-07-26 17:23 618阅读 0赞
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jQuery Boilerplate</title>
  5. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  6. <script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
  7. </head>
  8. <body>
  9. <table class="table2excel" data-tableName="Test Table 1">
  10. <thead>
  11. <tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
  12. <tr><td>This Should get exported as a header</td><td>This should too</td></tr>
  13. </thead>
  14. <tbody>
  15. <tr>
  16. <td style="background-color: blue; color: purple;">data1a with a <a href="#">link one</a> and <a href="#">link two</a> and color won't be exported.</td>
  17. <td>data1b with a <img src="image_file.jpg" alt="image">.</td></tr>
  18. <tr>
  19. <td>data2a with a <input tyle="text" value="text value">.</td>
  20. <td>data2b with a <input tyle="text" value="second text value">.</td>
  21. </tr>
  22. </tbody>
  23. <tfoot>
  24. <tr><td colspan="2">This footer spans 2 cells</td></tr>
  25. </tfoot>
  26. </table>
  27. <button class="exportToExcel">Export to XLS</button>
  28. <table class="table2excel" data-tableName="Test Table 2">
  29. <thead>
  30. <tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
  31. <tr><td>This Should get exported as a header</td><td>This should too</td></tr>
  32. </thead>
  33. <tbody>
  34. <tr><td>data1a</td><td>data1b</td></tr>
  35. <tr><td>data2a</td><td>data2b</td></tr>
  36. </tbody>
  37. <tfoot>
  38. <tr><td colspan="2">This footer spans 2 cells</td></tr>
  39. </tfoot>
  40. </table>
  41. <button class="exportToExcel">Export to XLS</button>
  42. <table class="table2excel table2excel_with_colors" data-tableName="Test Table 3">
  43. <thead>
  44. <tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
  45. <tr><td style="background-color: green;">This Should get exported as a header and maintain background color</td><td>This should too</td></tr>
  46. </thead>
  47. <tbody>
  48. <tr><td style="background-color: green; color: red;">data1a</td><td>data1b</td></tr>
  49. <tr><td>data2a</td><td>data2b</td></tr>
  50. </tbody>
  51. <tfoot>
  52. <tr><td colspan="2">This footer spans 2 cells</td></tr>
  53. </tfoot>
  54. </table>
  55. <button class="exportToExcel">Export to XLS</button>
  56. <script>
  57. $(function() {
  58. $(".exportToExcel").click(function(e){
  59. var table = $(this).prev('.table2excel');
  60. if(table && table.length){
  61. var preserveColors = (table.hasClass('table2excel_with_colors') ? true : false);
  62. $(table).table2excel({
  63. exclude: ".noExl",
  64. name: "Excel Document Name",
  65. filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, "") + ".xls",
  66. fileext: ".xls",
  67. exclude_img: true,
  68. exclude_links: true,
  69. exclude_inputs: true,
  70. preserveColors: preserveColors
  71. });
  72. }
  73. });
  74. });
  75. </script>
  76. </body>
  77. </html>

发表评论

表情:
评论列表 (有 0 条评论,618人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Excel表格导出

    开发工具与关键技术:MVC 作者:文泽钦 撰写时间:2019年5月25日 员工数据导出到excel表格,导出前要对数据处理,因为一个项目可以导出的数据比较多,在导出前