12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>HTML table Export</title>
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
- <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
- <script type="text/javascript" src="../tableExport.js"></script>
- <script type="text/javaScript">
- function doExport() {
- $('#excelstyles').tableExport({
- type:'excel',
- mso: {
- styles: ['background-color',
- 'color',
- 'font-family',
- 'font-size',
- 'font-weight',
- 'text-align']
- }
- }
- );
- }
- </script>
- </head>
- <body>
- <a href="#" onclick="doExport()">Export to Excel</a>
- <table id="excelstyles">
- <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>
|