Exporting an HTML table to PDF - PAKWAP.COM https://pakwap.com/ RSS - PAKWAP.COM https://pakwap.com/assets/img/images/logo.png RSS - PAKWAP.COM https://pakwap.com/ admin@pakwap.com (admin) admin@pakwap.com (admin) Sat, 28 Feb 2026 09:35:58 +0500 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.<br> <br> <pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; href=&quot;https&#58;//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; /&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https&#58;//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css&quot; /&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https&#58;//bootstraptema.ru/snippets/information/2016/etp/shieldui-all.min.css&quot; /&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https&#58;//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https&#58;//bootstraptema.ru/snippets/information/2016/etp/shieldui-all.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https&#58;//bootstraptema.ru/snippets/information/2016/etp/jszip.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https&#58;//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt; &lt;div class=&quot;container&quot;&gt; &lt;h1 class=&quot;text-center&quot;&gt;Export a HTML Table to PDF&lt;/h1&gt; &lt;div class=&quot;row&quot;&gt; &lt;button id=&quot;exportButton&quot; class=&quot;btn btn-lg btn-danger center-block&quot;&gt;&lt;span class=&quot;fa fa-file-pdf-o&quot;&gt;&lt;/span&gt; Export to PDF&lt;/button&gt; &lt;hr /&gt; &lt;div class=&quot;table-responsive&quot;&gt; &lt;table id=&quot;exportTable&quot; class=&quot;table table-bordered table-hover&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;All&lt;/th&gt; &lt;th&gt;Url&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;VK&lt;/td&gt; &lt;td&gt;1211&lt;/td&gt; &lt;td&gt;&lt;a href=&quot;https&#58;//vk.com/bootstraptema&quot; target=&quot;_blank&quot;&gt;https&#58;//vk.com/bootstraptema&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Twitter&lt;/td&gt; &lt;td&gt;1034&lt;/td&gt; &lt;td&gt;&lt;a href=&quot;https&#58;//twitter.com/bootstraptema&quot; target=&quot;_blank&quot;&gt;https&#58;//twitter.com/bootstraptema&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Facebook&lt;/td&gt; &lt;td&gt;1031&lt;/td&gt; &lt;td&gt;&lt;a href=&quot;https&#58;//www.facebook.com/bootstraptema&quot; target=&quot;_blank&quot;&gt;https&#58;//www.facebook.com/bootstraptema&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Odnoklassniki&lt;/td&gt; &lt;td&gt;1028&lt;/td&gt; &lt;td&gt;&lt;a href=&quot;https&#58;//ok.ru/group/52988673523881/&quot; target=&quot;_blank&quot;&gt;https&#58;//ok.ru/group/52988673523881/&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Tumblr&lt;/td&gt; &lt;td&gt;1021&lt;/td&gt; &lt;td&gt;&lt;a href=&quot;https&#58;//www.tumblr.com/blog/bootstraptema&quot; target=&quot;_blank&quot;&gt;https&#58;//www.tumblr.com/blog/bootstraptema&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Pinterest&lt;/td&gt; &lt;td&gt;1008&lt;/td&gt; &lt;td&gt;&lt;a href=&quot;https&#58;//ru.pinterest.com/atmpl/bootstrap/&quot; target=&quot;_blank&quot;&gt;https&#58;//ru.pinterest.com/atmpl/bootstrap/&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt;&lt;!-- /.table-responsive --&gt; &lt;/div&gt;&lt;!-- /.row --&gt; &lt;/div&gt;&lt;!-- /.container --&gt; &lt;script&gt; jQuery(function ($) { $(&quot;#exportButton&quot;).click(function () { var dataSource = shield.DataSource.create({ data&#58; &quot;#exportTable&quot;, schema&#58; { type&#58; &quot;table&quot;, fields&#58; { Name&#58; { type&#58; String }, All&#58; { type&#58; Number }, Url&#58; { type&#58; String } } } }); dataSource.read().then(function (data) { var pdf = new shield.exp.PDFDocument({ created&#58; new Date() }); pdf.addPage(&quot;a4&quot;, &quot;portrait&quot;); pdf.table( 50, 50, data, &#91; { field&#58; &quot;Name&quot;, title&#58; &quot;BootstrapTema.ru&quot;, width&#58; 150 }, { field&#58; &quot;All&quot;, title&#58; &quot;All&quot;, width&#58; 50 }, { field&#58; &quot;Url&quot;, title&#58; &quot;Url resource&quot;, width&#58; 250 } ], { margins&#58; { top&#58; 50, left&#58; 50 } } ); pdf.saveAs({ fileName&#58; &quot;myPDF&quot; }); }); }); }); &lt;/script&gt;</pre> https://pakwap.com/topics/483?pid=719 Exporting an HTML table to PDF REHAN Thu, 26 Feb 2026 17:30:39 +0500 Messages https://pakwap.com/topics/483?pid=719