Exporting an HTML table to PDF

1. REHAN 26.02.2026 / 17:30
We export the contents of the HTML table to a PDF document, and after clicking the button, we save the document, a finished snippet using Bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/snippets/information/2016/etp/shieldui-all.min.css" />
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://bootstraptema.ru/snippets/information/2016/etp/shieldui-all.min.js"></script>
<script type="text/javascript" src="https://bootstraptema.ru/snippets/information/2016/etp/jszip.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">

<h1 class="text-center">Export a HTML Table to PDF</h1>

<div class="row">

 <button id="exportButton" class="btn btn-lg btn-danger center-block"><span class="fa fa-file-pdf-o"></span> Export to PDF</button>

<hr />

<div class="table-responsive">

 <table id="exportTable" class="table table-bordered table-hover">
 <thead>
 <tr>
 <th>Name</th>
 <th>All</th>
 <th>Url</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>VK</td>
 <td>1211</td>
 <td><a href="https://vk.com/bootstraptema" target="_blank">https://vk.com/bootstraptema</a></td>
 </tr>
 <tr>
 <td>Twitter</td>
 <td>1034</td>
 <td><a href="https://twitter.com/bootstraptema" target="_blank">https://twitter.com/bootstraptema</a></td>
 </tr>
 <tr>
 <td>Facebook</td>
 <td>1031</td>
 <td><a href="https://www.facebook.com/bootstraptema" target="_blank">https://www.facebook.com/bootstraptema</a></td>
 </tr>
 <tr>
 <td>Odnoklassniki</td>
 <td>1028</td>
 <td><a href="https://ok.ru/group/52988673523881/" target="_blank">https://ok.ru/group/52988673523881/</a></td>
 </tr>
 <tr>
 <td>Tumblr</td>
 <td>1021</td>
 <td><a href="https://www.tumblr.com/blog/bootstraptema" target="_blank">https://www.tumblr.com/blog/bootstraptema</a></td>
 </tr>
 <tr>
 <td>Pinterest</td>
 <td>1008</td>
 <td><a href="https://ru.pinterest.com/atmpl/bootstrap/" target="_blank">https://ru.pinterest.com/atmpl/bootstrap/</a></td>
 </tr>
 </tbody>
 </table>

</div><!-- /.table-responsive -->
</div><!-- /.row -->
</div><!-- /.container -->

<script>
 jQuery(function ($) {
 $("#exportButton").click(function () {
 var dataSource = shield.DataSource.create({
 data: "#exportTable",
 schema: {
 type: "table",
 fields: {
 Name: { type: String },
 All: { type: Number },
 Url: { type: String }
 }
 }
 });

 dataSource.read().then(function (data) {
 var pdf = new shield.exp.PDFDocument({
 created: new Date()
 });

 pdf.addPage("a4", "portrait");

 pdf.table(
 50,
 50,
 data,
 [
 { field: "Name", title: "BootstrapTema.ru", width: 150 },
 { field: "All", title: "All", width: 50 },
 { field: "Url", title: "Url resource", width: 250 }
 ],
 {
 margins: {
 top: 50,
 left: 50
 }
 }
 );

 pdf.saveAs({
 fileName: "myPDF"
 });
 });
 });
 });
</script>

URL: https://pakwap.com/topics/483