"TEST: PDF from Bootstrap with Javascript"
Bootstrap 3.3.0 Snippet by mrmccormack

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="http://parall.ax/parallax/js/jspdf.js"></script> <script> var doc = new jsPDF(); // We'll make our own renderer to skip this editor var specialElementHandlers = { '#editor': function(element, renderer){ return true; } }; // All units are in the set measurement for the document // This can be changed to "pt" (points), "mm" (Default), "cm", "in" doc.fromHTML($('#render_me').get(0), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers }); //doc.save('Test.pdf'); $('a').click(function(){ doc.save('TestHTMLDoc.pdf'); }); </script> <a href="#">Download Test PDF</a> <div id="render_me"> <div class="col col50 float_left"><h4> </h4><strong>Order Placed</strong>: 11/22/13, 10:38 am<h4>Customer Information</h4><p><a href="/surplus_ammo/admin/user/index.php?action=edit&id=2">Scott Dunham</a><br><a href="mailto:sdunham@sitecrafting.com">sdunham@sitecrafting.com</a><br>123.456.7890</p></div><div class="col col50 float_right no_margin"><h4>Status</h4><select name="OrderStatusId" id="order_edit_OrderStatusId"><option value="1" selected="selected">New</option><option value="2">Processed</option><option value="3">Shipped</option><option value="4">Completed</option></select><h4>Invoice Number</h4> <input class="field" type="text" id="order_edit_InvoiceNumber" name="InvoiceNumber" value="12345"></div><div class="col100 float_left no_margin"><div class="cleaner"></div></div><div class="col col50 float_left"><h4>Expected Shipping Date</h4> <input type="text" id="order_edit_ExpectedShipDate" class="field dates hasDatepicker" name="ExpectedShipDate" value=""></div><div class="col col50 float_right no_margin"><h4>Shipping Tracking Code</h4> <input class="field" type="text" id="order_edit_ShippingTrackingCode" name="ShippingTrackingCode" value=""></div><div class="col100 float_left no_margin"><div class="cleaner"></div></div><div class="col col50 float_left"><h4>Billing Information</h4><p>Sean Dean<br>Sitecrafting<br>1234 S Street St<br>Apt # 1<br>Tacoma, WA 98408</p></div><div class="col col50 float_right no_margin"><h4>Shipping Information</h4><p>Sean Dean<br>SiteCrafting<br>1234 S Street St<br>Apt # 1<br>Tacoma, WA 98408</p><p><strong>Delivery Confirmation</strong>: Blah blah blah, confirmation</p><p><strong>Order Notes</strong><br>Here are some notes for the order</p><p><strong>Special Instructions</strong><br>Here are some special instructions for shipping to me.</p></div><div class="col100 float_left no_margin"><div class="cleaner"></div></div><div class="col col50 float_left"></div><div class="col col50 float_right no_margin"></div><div class="col col100 float_left no_margin"><h3 style="padding-top: 20px;">FFL Information</h3></div><div class="col col50 float_left"></div><div class="col col50 float_right no_margin"></div><div class="col col100 float_left no_margin"><h4>Customer Indicated FFL is on file</h4>No</div><div class="col col50 float_left"><h4>Gun Dealer Business Name</h4> <input class="field" type="text" id="order_edit_FFLBusinessName" name="FFLBusinessName" value=""><h4>Gun Dealer Address 1</h4> <input class="field" type="text" id="order_edit_FFLAddress1" name="FFLAddress1" value=""><h4>Gun Dealer City</h4> <input class="field" type="text" id="order_edit_FFLCity" name="FFLCity" value=""><h4>Gun Dealer Zipcode</h4> <input class="field" type="text" id="order_edit_FFLZipcode" name="FFLZipcode" value=""></div><div class="col col50 float_right no_margin"><h4>Gun Dealer Phone</h4> <input class="field" type="text" id="order_edit_FFLPhone" name="FFLPhone" value=""><h4>Gun Dealer Address 2</h4> <input class="field" type="text" id="order_edit_FFLAddress2" name="FFLAddress2" value=""><h4>Gun Dealer State</h4> <input class="field" type="text" id="order_edit_FFLState" name="FFLState" value=""></div><div class="col col100 float_left no_margin"><h4>Products Ordered</h4><table id="order-table" style="width: 97%;"> <thead> <tr> <th> Qty </th> <th style="width: 200px;"> Item </th> <th> Restriction(s) </th> <th class="align-right"> Cost Each </th> <th class="align-right"> Total </th> </tr> </thead><tbody><tr> <td>10</td> <td>I'm just testing this</td> <td><ul><li>FFL</li><li>Shipping</li></ul></td> <td class="align-right">$10</td> <td class="align-right">$100</td> </tr><tr> <td>3</td> <td>Another test, don't care what the name is</td> <td><ul><li>FFL</li><li>Shipping</li></ul></td> <td class="align-right">$20.5</td> <td class="align-right">$61.5</td> </tr><tr class="lower"> <td colspan="4" class="align-right">Shipping</td> <td class="align-right">$10.25</td> </tr><tr class="lower"> <td colspan="4" class="align-right">Tax</td> <td class="align-right">$1.25</td> </tr><tr class="lower"> <td colspan="4" class="align-right"><h4>Total</h4></td> <td class="align-right"><h4>$173</h4></td> </tr></tbody></table></div><div class="col col50 float_left"></div><div class="col col50 float_right no_margin"></div><div class="cleaner"> </div> <script src='http://parall.ax/parallax/js/jspdf.js'></script>
$(document).ready(function () { var doc = new jsPDF(); // We'll make our own renderer to skip this editor var specialElementHandlers = { '#editor': function(element, renderer){ return true; } }; // All units are in the set measurement for the document // This can be changed to "pt" (points), "mm" (Default), "cm", "in" doc.fromHTML($('#render_me').get(0), 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers }); //doc.save('Test.pdf'); }); // end document.ready function $('a').click(function(){ doc.save('TestHTMLDoc.pdf'); });

Related: See More


Questions / Comments: