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

Hello, friend today we are going to see clearly what we are going to see in the article jsPDF Tutorial to Export HTML Table to Excel and PDF Document Using jsPDF-Autotable Library in Javascript. We hope you find this article very useful.

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

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

<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>
//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');
}

Read Also: Three.js Tutorial to Animate Live Webcam Effect in Browser Using Javascript

Final Words

jsPDF Tutorial to Export HTML Table to Excel and PDF Document Using jsPDF-Autotable Library in Javascript We hope you find the article useful and will see you in the next article.

Hi, I'm Selva a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment