xlsx.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML table Export</title>
  6. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  7. <script type="text/javascript" src="../libs/js-xlsx/xlsx.core.min.js"></script>
  8. <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
  9. <script type="text/javascript" src="../tableExport.js"></script>
  10. </head>
  11. <body>
  12. <section>
  13. <h1>
  14. HTML Table Export<br>
  15. </h1>
  16. </section>
  17. <section>
  18. <ul>
  19. <li><a href="#" onClick="$('#countries').tableExport({type: 'excel', mso: {fileFormat: 'xlsx'}});"> <img src='icons/xls.png' alt="XLSX" style="width:24px"> XLSX</a></li>
  20. </ul>
  21. <table id="countries">
  22. <thead>
  23. <tr>
  24. <th data-field="rank">Rank</th>
  25. <th data-field="country">Country</th>
  26. <th data-field="population">Population</th>
  27. <th data-field="date">Date</th>
  28. <th data-field="world">% of world</th>
  29. <th data-field="language">Language</th>
  30. </tr>
  31. </thead>
  32. <tbody>
  33. <tr>
  34. <td>1</td>
  35. <td>China</td>
  36. <td>1,368,710,000</td>
  37. <td>March 14, 2015</td>
  38. <td>18.9%</td>
  39. <td>中文</td>
  40. </tr>
  41. <tr>
  42. <td>2</td>
  43. <td>India</td>
  44. <td>1,268,220,000</td>
  45. <td>March 14, 2015</td>
  46. <td>17.5%</td>
  47. <td>हिन्दी</td>
  48. </tr>
  49. <tr>
  50. <td>3</td>
  51. <td>United States</td>
  52. <td>320,583,000</td>
  53. <td>March 14, 2015</td>
  54. <td>4.43%</td>
  55. <td>English</td>
  56. </tr>
  57. <tr>
  58. <td>4</td>
  59. <td>Indonesia</td>
  60. <td>255,461,700</td>
  61. <td>July 1, 2015</td>
  62. <td>3.53%</td>
  63. <td></td>
  64. </tr>
  65. <tr>
  66. <td>5</td>
  67. <td>Brazil</td>
  68. <td>204,014,000</td>
  69. <td>March 14, 2015</td>
  70. <td>2.82%</td>
  71. <td></td>
  72. </tr>
  73. <tr>
  74. <td>6</td>
  75. <td>Pakistan</td>
  76. <td>189,223,000</td>
  77. <td>March 14, 2015</td>
  78. <td>2.62%</td>
  79. <td></td>
  80. </tr>
  81. <tr>
  82. <td>7</td>
  83. <td>Nigeria</td>
  84. <td>183,523,000</td>
  85. <td>July 1, 2015</td>
  86. <td>2.54%</td>
  87. <td></td>
  88. </tr>
  89. <tr>
  90. <td>8</td>
  91. <td>Bangladesh</td>
  92. <td>157,986,000</td>
  93. <td>March 14, 2015</td>
  94. <td>2.18%</td>
  95. <td></td>
  96. </tr>
  97. <tr>
  98. <td>9</td>
  99. <td>Russia</td>
  100. <td>146,270,033</td>
  101. <td>January 1, 2015</td>
  102. <td>2.02%</td>
  103. <td>Русский</td>
  104. </tr>
  105. <tr>
  106. <td>10</td>
  107. <td>Japan</td>
  108. <td>126,970,000</td>
  109. <td>February 1, 2015</td>
  110. <td>1.76%</td>
  111. <td>日本語</td>
  112. </tr>
  113. </tbody>
  114. </table>
  115. </section>
  116. </body>
  117. </html>