qianda
/
hebei-chengben-car


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
							<!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-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>
<!--
    Roboto (Default):
    <script type="text/javascript" src="../libs/pdfmake/vfs_fonts.js"></script>

    Arabic - Mirza:
    <script type="text/javascript" src="../libs/pdfmake/mirza_fonts.js"></script>

    Chinese - gbsn00lp:
    <script type="text/javascript" src="../libs/pdfmake/gbsn00lp_fonts.js"></script>

    Chinese - ZCOOLXiaoWei:
    <script type="text/javascript" src="../libs/pdfmake/ZCOOLXiaoWei_fonts.js"></script>
-->
    <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
    <script type="text/javascript" src="../tableExport.js"></script>
    <style>
    <!--
    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,docDefinition:{pageOrientation:'landscape'}}});">
          <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,docDefinition:{}}});">
          <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (pdfmake colspan & rowspan)</a>
        </li>
        <li>
          <a href="#" onClick="$('#countries, #mixspans').tableExport({type:'pdf',pdfmake:{enabled:true,docDefinition:{pageOrientation:'landscape'}}});">
            <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (multiple tables)</a>
        </li>
      </ul>
    </section>
    <!-- Source: https://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">&nbsp;</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 (Ää&auml;Öö&ouml;Üü&uuml;ß)</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>