jsPDF Tutorial to Export HTML Table to Excel and PDF Document Using jsPDF-Autotable Library in Javascript Full Tutorial For Beginners

 

 

Welcome folks today in this blog post we will be exporting html table to excel and pdf document using jspdf-autotable library in javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js">
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.37/jspdf.plugin.autotable.js">
  </script> 
   
</head>

<body>  
  <button onclick="generateExcel()">Export to Excel</button>
  <button onclick="generatePDF()">Export to PDF</button>
  <br />
  <br />

  <table border="1" cellspacing="0" bordercolor="gray" id="table_with_data">
    <tbody>
      <tr class="header">
        <th>Rate ID</th>
        <th>Origin</th>
        <th>Origin Via</th>
        <th>Destination</th>
        <th>Destination Via</th>
        <th>Price</th>
        <th>Commodity</th>
        <th>Container Type</th>
        <th>Service</th>
        <th>Carrier</th>
        <th>Transit Time</th>
        <th>Contract ID</th>
        <th>Amendment #</th>
        <th>Effective Date</th>
        <th>Expiration Date</th>    
        <th>Contract Expiration</th>            
      </tr>
      <tr>
        <td>01</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>02</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>03</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>04</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>05</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>06</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>07</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>08</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>09</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>11</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>13</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>14</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>15</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>16</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>17</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>18</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>19</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>20</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>21</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>22</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>23</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>24</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
      <tr>
        <td>25</td>
        <td>Los Angeles</td>
        <td></td>
        <td>Shanghai</td>
        <td></td>
        <td>$1,200.00</td>
        <td>FAK; Cargo N.O.S. Etc.</td>
        <td>FCL - 40' / DC</td>
        <td>CY/CY</td>
        <td>K Line America</td>
        <td>N/A</td>
        <td>987654321a</td>
        <td>16</td>
        <td>01/02/2017</td>
        <td>12/31/2017</td>
        <td>12/31/2017</td>
      </tr>
    </tbody>
  </table>

</body>

 

 

Now we need to make an script.js file and copy paste the following code

 

 

script.js

 

 

//export table to excel
function generateExcel() {
    //getting data from our table
    var data_type = 'data:application/vnd.ms-excel';
    var table_div = document.getElementById('table_with_data');
    var table_html = table_div.outerHTML.replace(/ /g, '%20');

    var a = document.createElement('a');
    a.href = data_type + ', ' + table_html;
    a.download = 'Example_Table_To_Excel.xls';
    a.click();
}


//export table to pdf
function generatePDF() {
  var doc = new jsPDF('l', 'pt');

  var elem = document.getElementById('table_with_data');
  var data = doc.autoTableHtmlToJson(elem);
  doc.autoTable(data.columns, data.rows, {
    margin: {left: 35},
    theme: 'grid',
    tableWidth: 'auto',
    fontSize: 8,
    overflow: 'linebreak',
    }
  );
    
  doc.save('Example_Table_To_PDF.pdf');
}

Leave a Reply