qianda
/
hebei-chengben-car


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!DOCTYPE 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/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>
  <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;
    }

    .table-striped {
      background-color: white;
      padding: 0.5rem;
    }

    .table-striped > tbody > tr:nth-child(2n+1) > td {
      background-color: #ccdf88;
    }
    -->
  </style>
  <script type="text/javaScript">

    function doExport(selector, params) {
      var options = {
        tableName: 'Side by Side Tables'
      };
      $.extend(true, options, params);
      $(selector).tableExport(options);
    }
    
    function doBeforeAutotable(table, columns, rows, settings) {
      var n = settings.tableExport.mytableno;
      
      if (settings.tableExport.mytableno == 5) {
        settings.tableExport.mytableno = 0;
        settings.tableExport.doc.addPage();
      }

      settings.startY = 10;
      settings.margin.left = 10 + settings.tableExport.mytableno * (settings.tableWidth + 10);
      settings.margin.right =  settings.margin.left + settings.tableWidth;
      settings.tableExport.mytableno++;
    }

  </script>
</head>
<body>
  <section>
    <h1>
      Sise by Side HTML Table Export<br>
    </h1>
  </section>
  <section>
    <ul>
      <li>
        <a href="#" onClick="doExport('.table-striped',
                                      {type: 'pdf',
                                       jspdf: {orientation: 'l',
                                       autotable: {startY: 10,
                                                   margin: {left: 10, top: 10},
                                                   pageBreak: 'avoid',
                                                   tableWidth: 60,
                                                   tableExport: {mytableno: 0,
                                                                 onBeforeAutotable: doBeforeAutotable}
                                                   }
                                       }
                                      });">
           <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (Side by Side)</a>
      </li>
    </ul>
    <div>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    </div>
    <div>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    </div>
    <div>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    <table class="table-striped"><thead><tr><th>C1</th><th>C2</th><th>C3</th></tr></thead><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr></tbody></table>
    </div>
  </section>
</body>
</html>