cssPdf.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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="http://code.jquery.com/jquery-latest.min.js"></script>
  7. <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
  8. <script type="text/javascript" src="../libs/jsPDF/jspdf.umd.min.js"></script>
  9. <script type="text/javascript" src="../tableExport.js"></script>
  10. <script type="text/javaScript">
  11. function doExport() {
  12. $('#pdfstyles').tableExport({type:'pdf',
  13. jspdf: {orientation: 'p',
  14. margins: {right: 20, left: 20, top: 30, bottom: 30},
  15. autotable: {styles: {fillColor: 'inherit',
  16. textColor: 'inherit',
  17. fontStyle: 'inherit'},
  18. tableWidth: 'wrap'}}});
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. <a href="#" onclick="doExport()">Export to PDF</a>
  24. <table id="pdfstyles">
  25. <thead>
  26. <tr>
  27. <th style="font-family: arial; font-size: 18px; font-weight: bold">C1</th>
  28. <th style="font-family: arial; font-size: 18px; font-weight: bold">C2</th>
  29. <th style="font-family: arial; font-size: 18px; font-weight: bold">C3</th>
  30. </tr>
  31. </thead>
  32. <tbody>
  33. <tr>
  34. <td style="background-color:red">A</td>
  35. <td style="background-color:green">B</td>
  36. <td style="background-color:blue">C</td>
  37. </tr>
  38. <tr>
  39. <td style="text-align:left">D</td>
  40. <td style="text-align:center">E</td>
  41. <td style="text-align:right">F</td>
  42. </tr>
  43. <tr>
  44. <td style="color:green">G</td>
  45. <td style="color:blue">H</td>
  46. <td style="color:red">I</td>
  47. </tr>
  48. </tbody>
  49. </table>
  50. </body>
  51. </html>