Generate pdf from html

by lennyekberg

HTML

<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="product_sheet">
    <div class="red">
        <h3>Discombobulating</h3>
        <p>Topping macaroon ice cream cotton candy jujubes pudding marzipan cheesecake. Chocolate powder muffin toffee ice cream carrot cake brownie fruitcake cotton candy. </p>
    </div>
    <div class="handsome">
        <!--<img src="https://s-media-cache-ak0.pinimg.com/236x/90/9e/7e/909e7edc54b293a44a034775a7893fb5.jpg"/>-->
    </div>
</div>

<button id="generate_pdf_btn">Download PDF</button>

CSS

#product_sheet{width:800px;background:yellow;float:left;}
#product_sheet div{
  width: 50%;
  float: left;
  padding:5%;
  box-sizing:...

JavaScript

$ = jQuery;

$( "#generate_pdf_btn" ).click(function() {
  make_product_sheet();
});


function make_product_sheet() {

    console.log("#generate_pdf_btn clicked");
    var pdf = new jsPDF('p', 'pt', 'a4');
    pdf.addHTML(document.getElementById("product_sheet"), function() {

        ps_filename = "generated-product-sheet";
        pdf.save(ps_filename+'.pdf');
    });
}

//don't worry about the generated pdf being blurry, it's fixed by having a larger #product_sheet div.