tableexport.jquery.plugin
Version:
305 lines (299 loc) • 8.16 kB
HTML
<html>
<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/pdfmake/pdfmake.min.js"></script>
<script type="text/javascript" src="../libs/pdfmake/vfs_fonts.js"></script>
<!--
<script type="text/javascript" src="../libs/pdfmake/mirza_fonts.js"></script>
-->
<script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="../tableExport.js"></script>
<style type="text/css">
<!--
table {
border-collapse: collapse;
}
table > thead > tr > td,
table > thead > tr > th {
background-color: gray;
border: 1px solid #efefef;
color: white;
padding: 0.2rem;
}
table > tbody > tr > td {
border: 1px solid #999;
padding: 0.2rem;
}
-->
</style>
</head>
<body>
<section>
<h1>
HTML Table Export<br>
</h1>
</section>
<section>
<ul>
<li>
<a href="#" onClick="$('#countries').tableExport({type:'pdf',pdfmake:{enabled:true}});">
<img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (pdfmake)</a>
</li>
<li>
<a href="#" onClick="$('#mixspans').tableExport({type:'pdf',pdfmake:{enabled:true}});">
<img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (pdfmake colspan & rowspan)</a>
</li>
<!--
<li>
<a href="#" onClick="$('#countries').tableExport({type:'pdf',
pdfmake:{enabled:true,
docDefinition: {defaultStyle: {font: 'Mirza'}
},
fonts: {Mirza: {normal: 'Mirza-Regular.ttf',
bold: 'Mirza-Bold.ttf',
italics: 'Mirza-Medium.ttf',
bolditalics: 'Mirza-SemiBold.ttf'
}
}
}
});">
<img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (pdfmake arabic)</a>
</li>
-->
</ul>
</section>
<!-- Source: http://en.wikipedia.org/wiki/List_of_countries_and_dependencies_by_population -->
<table id="countries">
<thead>
<tr>
<th data-field="rank">Rank</th>
<th data-field="country">Country</th>
<th data-field="population">Population</th>
<th data-field="date">Date</th>
<th data-field="world">% of world</th>
<th data-field="language">Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><b>China</b></td>
<td>1,368,710,000</td>
<td>March 14, 2015</td>
<td>18.9%</td>
<td>中文</td>
</tr>
<tr>
<td>2</td>
<td><i>India</i></td>
<td>1,268,220,000</td>
<td>March 14, 2015</td>
<td>17.5%</td>
<td>हिन्दी</td>
</tr>
<tr>
<td>3</td>
<td><u>United States</u></td>
<td>320,583,000</td>
<td>March 14, 2015</td>
<td>4.43%</td>
<td>English</td>
</tr>
<tr>
<td>4</td>
<td>Indonesia</td>
<td>255,461,700</td>
<td>July 1, 2015</td>
<td>3.53%</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>Brazil</td>
<td>204,014,000</td>
<td>March 14, 2015</td>
<td>2.82%</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>Pakistan</td>
<td>189,223,000</td>
<td>March 14, 2015</td>
<td>2.62%</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>Nigeria</td>
<td>183,523,000</td>
<td>July 1, 2015</td>
<td>2.54%</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>Bangladesh</td>
<td>157,986,000</td>
<td>March 14, 2015</td>
<td>2.18%</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td>Russia</td>
<td>146,270,033</td>
<td>January 1, 2015</td>
<td>2.02%</td>
<td>Русский</td>
</tr>
<tr>
<td>10</td>
<td>Japan</td>
<td>126,970,000</td>
<td>February 1, 2015</td>
<td>1.76%</td>
<td>日本語</td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td>11</td>
<td>Mexico</td>
<td>121,005,815</td>
<td>July 1, 2015</td>
<td>1.67%</td>
<td></td>
</tr>
<tr>
<td>12</td>
<td>Philippines</td>
<td>101,137,900</td>
<td>March 14, 2015</td>
<td>1.4%</td>
<td></td>
</tr>
<tr>
<td>13</td>
<td>Vietnam</td>
<td>90,730,000</td>
<td>July 1, 2014</td>
<td>1.25%</td>
<td>Tiếng Việt</td>
</tr>
<tr>
<td>14</td>
<td>Ethiopia</td>
<td>90,076,012</td>
<td>July 1, 2015</td>
<td>1.25%</td>
<td></td>
</tr>
<tr>
<td>15</td>
<td>Egypt</td>
<td>88,168,200</td>
<td>March 14, 2015</td>
<td>1.22%</td>
<td>العربية</td>
</tr>
<tr>
<td>16</td>
<td>Germany</td>
<td>80,925,000</td>
<td>June 30, 2014</td>
<td>1.12%</td>
<td>Deutsch</td>
</tr>
<tr>
<td>17</td>
<td>Iran</td>
<td>78,184,800</td>
<td>March 14, 2015</td>
<td>1.08%</td>
<td></td>
</tr>
<tr>
<td>18</td>
<td>Turkey</td>
<td>77,695,904</td>
<td>December 31, 2014</td>
<td>1.07%</td>
<td>Türkçe</td>
</tr>
<tr>
<td>19</td>
<td>Democratic Republic of the Congo</td>
<td>71,246,000</td>
<td>July 1, 2015</td>
<td>0.99%</td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>France</td>
<td>66,104,000</td>
<td>February 1, 2015</td>
<td>0.91%</td>
<td>Français</td>
</tr>
<tr>
<td>30</td>
<td>Spain</td>
<td>46,464,053</td>
<td>July 1, 2014</td>
<td>0.64%</td>
<td>español, castellano</td>
</tr>
</tbody>
</table>
<h3>Table with rowspan and colspan</h3>
<table id="mixspans">
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
</tr>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="3" colspan="2">1</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>