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
<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.
