xlsxHyperlink.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/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. <script type="text/javascript">
  11. function DoOnXlsxHyperlink($cell, row, col, href, content, hyperlink) {
  12. if (row > 0) {
  13. if (col === 3)
  14. return hyperlink;
  15. if (col === 4)
  16. return content;
  17. if (col === 5)
  18. return href;
  19. if (col === 6) {
  20. const new_href = 'https://en.wikipedia.org/wiki/List_of_countries_and_dependencies_by_population';
  21. const new_content = 'List of countries';
  22. return '=HYPERLINK("' + new_href + '","' + new_content + '")';
  23. }
  24. }
  25. }
  26. $(document).ready(function() {
  27. $('#export').click(function() {
  28. $('#countries').tableExport( {
  29. type: 'excel',
  30. mso: {
  31. fileFormat: 'xlsx',
  32. xlsx: {
  33. onHyperlink: DoOnXlsxHyperlink
  34. }
  35. }
  36. });
  37. });
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. <section>
  43. <h1>
  44. HTML table export to xlsx: onHyperlink Example<br>
  45. </h1>
  46. </section>
  47. <section>
  48. <button id="export">Export to Excel</button>
  49. <p>
  50. <table id="countries">
  51. <thead>
  52. <tr>
  53. <th data-field="rank">Rank</th>
  54. <th data-field="country">Country</th>
  55. <th data-field="language">Language</th>
  56. <th>Original hyperlink</th>
  57. <th>Cell content as text</th>
  58. <th>Cell href as text</th>
  59. <th>Modified hyperlink</th>
  60. </tr>
  61. </thead>
  62. <tbody>
  63. <tr>
  64. <td>1</td>
  65. <td>China</td>
  66. <td>中文</td>
  67. <td><a title="China" href="/wiki/China">China</a></td>
  68. <td><a title="China" href="/wiki/China">China</a></td>
  69. <td><a title="China" href="/wiki/China">China</a></td>
  70. <td><a title="China" href="/wiki/China">China</a></td>
  71. </tr>
  72. <tr>
  73. <td>2</td>
  74. <td>India</td>
  75. <td>हिन्दी</td>
  76. <td><a title="India" href="/wiki/India">India</a></td>
  77. <td><a title="India" href="/wiki/India">India</a></td>
  78. <td><a title="India" href="/wiki/India">India</a></td>
  79. <td><a title="India" href="/wiki/India">India</a></td>
  80. </tr>
  81. <tr>
  82. <td>3</td>
  83. <td>United States</td>
  84. <td>English</td>
  85. <td><a title="United States" href="/wiki/United_States">United States</a></td>
  86. <td><a title="United States" href="/wiki/United_States">United States</a></td>
  87. <td><a title="United States" href="/wiki/United_States">United States</a></td>
  88. <td><a title="United States" href="/wiki/United_States">United States</a></td>
  89. </tr>
  90. <tr>
  91. <td>4</td>
  92. <td>Indonesia</td>
  93. <td></td>
  94. <td><a title="Indonesia" href="/wiki/Indonesia">Indonesia</a></td>
  95. <td><a title="Indonesia" href="/wiki/Indonesia">Indonesia</a></td>
  96. <td><a title="Indonesia" href="/wiki/Indonesia">Indonesia</a></td>
  97. <td><a title="Indonesia" href="/wiki/Indonesia">Indonesia</a></td>
  98. </tr>
  99. <tr>
  100. <td>5</td>
  101. <td>Japan</td>
  102. <td>日本語</td>
  103. <td><a title="Japan" href="/wiki/Japan">Japan</a></td>
  104. <td><a title="Japan" href="/wiki/Japan">Japan</a></td>
  105. <td><a title="Japan" href="/wiki/Japan">Japan</a></td>
  106. <td><a title="Japan" href="/wiki/Japan">Japan</a></td>
  107. </tr>
  108. </tbody>
  109. </table>
  110. </p>
  111. </section>
  112. </body>
  113. </html>