How to Export HTML Table to PDF using Javascript
Export HTML table to PDF, When the Export to pdf Button is clicked, the Export JavaScript function gets called.
Below the example :
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<div class="container">
<h3>How to Export HTML Table to PDF using Javascript</h3>
<button id="exportToButton" class="btn btn-success clearfix"><span class="fa fa-file-pdf-o"></span> Export to PDF</button>
<table id="exportToTable" class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jonson</td>
<td>31</td>
<td>jonson@gmail.com</td>
</tr>
<tr>
<td>Nailsan</td>
<td>32</td>
<td>nailsan@gmail.com</td>
</tr>
<tr>
<td>Carlo joi</td>
<td>30</td>
<td>carlojoi@gmail.com</td>
</tr>
<tr>
<td>Charlie Chat</td>
<td>32</td>
<td>charliechat@gmail.com</td>
</tr>
<tr>
<td>Loe Andan</td>
<td>34</td>
<td>loeandan@gmail.com</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/jszip.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$("#exportToButton").click(function () {
var dataSource = shield.DataSource.create({
data: "#exportToTable",
schema: {
type: "table",
fields: {
Name: { type: String },
Age: { type: Number },
Email: { type: String }
}
}
});
dataSource.read().then(function (data) {
var pdf = new shield.exp.PDFDocument({
author: "Devnote",
created: new Date()
});
pdf.addPage("a4", "portrait");
pdf.table(
50,
50,
data,
[
{ field: "Name", title: "Name", width: 200 },
{ field: "Age", title: "Age", width: 50 },
{ field: "Email", title: "Email", width: 200 }
],
{
margins: {
top: 50,
left: 50
}
}
);
pdf.saveAs({
fileName: "exportToPdf"
});
});
});
});
</script>