123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>HTML table Export</title>
- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
- <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
- <script type="text/javascript" src="../libs/jsPDF/jspdf.umd.min.js"></script>
- <script type="text/javascript" src="../tableExport.js"></script>
- <script type="text/javaScript">
- function doExport() {
- $('#pdfstyles').tableExport({type:'pdf',
- jspdf: {orientation: 'p',
- margins: {right: 20, left: 20, top: 30, bottom: 30},
- autotable: {styles: {fillColor: 'inherit',
- textColor: 'inherit',
- fontStyle: 'inherit'},
- tableWidth: 'wrap'}}});
- }
- </script>
- </head>
- <body>
- <a href="#" onclick="doExport()">Export to PDF</a>
- <table id="pdfstyles">
- <thead>
- <tr>
- <th style="font-family: arial; font-size: 18px; font-weight: bold">C1</th>
- <th style="font-family: arial; font-size: 18px; font-weight: bold">C2</th>
- <th style="font-family: arial; font-size: 18px; font-weight: bold">C3</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td style="background-color:red">A</td>
- <td style="background-color:green">B</td>
- <td style="background-color:blue">C</td>
- </tr>
- <tr>
- <td style="text-align:left">D</td>
- <td style="text-align:center">E</td>
- <td style="text-align:right">F</td>
- </tr>
- <tr>
- <td style="color:green">G</td>
- <td style="color:blue">H</td>
- <td style="color:red">I</td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
|