cssExcel.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML table Export</title>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  7. <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
  8. <script type="text/javascript" src="../tableExport.js"></script>
  9. <script type="text/javaScript">
  10. function doExport() {
  11. $('#excelstyles').tableExport({
  12. type:'excel',
  13. mso: {
  14. styles: ['background-color',
  15. 'color',
  16. 'font-family',
  17. 'font-size',
  18. 'font-weight',
  19. 'text-align']
  20. }
  21. }
  22. );
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <a href="#" onclick="doExport()">Export to Excel</a>
  28. <table id="excelstyles">
  29. <thead>
  30. <tr>
  31. <th style="font-family: arial; font-size: 18px; font-weight: bold">C1</th>
  32. <th style="font-family: arial; font-size: 18px; font-weight: bold">C2</th>
  33. <th style="font-family: arial; font-size: 18px; font-weight: bold">C3</th>
  34. </tr>
  35. </thead>
  36. <tbody>
  37. <tr>
  38. <td style="background-color:red">A</td>
  39. <td style="background-color:green">B</td>
  40. <td style="background-color:blue">C</td>
  41. </tr>
  42. <tr>
  43. <td style="text-align:left">D</td>
  44. <td style="text-align:center">E</td>
  45. <td style="text-align:right">F</td>
  46. </tr>
  47. <tr>
  48. <td style="color:green">G</td>
  49. <td style="color:blue">H</td>
  50. <td style="color:red">I</td>
  51. </tr>
  52. </tbody>
  53. </table>
  54. </body>
  55. </html>