Use html2canvas with jsPDF to save a PDF of a page
<p>I want to create a PDF from the contents of a div. I am using <a href="https://github.com/MrRio/jsPDF" rel="noreferrer">jsPDF</a>. The problem is none of my styles are passed, thus the PDF looks off. I then came across an <a href="http://www.techumber.com/2015/04/html-to-pdf-conversion-using-javascript.html" rel="noreferrer">article</a> that uses <a href="https://github.com/niklasvh/html2canvas" rel="noreferrer">html2canvas</a> to take a screenshot of the page. </p>

<p>When I try the example provided it gives me this error:</p>

<pre><code>uncaught exception: Invalid orientation: [object object] &lt;unknown&gt;
</code></pre>

<p>How do I solve this problem? </p>

<p>Here is the JS I am using:</p>

<pre><code>(function(){
var content = $('#content'),
    cache_width = content.width(),
    a4  =[ 595.28,  841.89];  // for a4 size paper width and height

$('#pdf').on('click',function(){
    $('body').scrollTop(0);
    createPDF();
});
//create pdf
function createPDF(){
    getCanvas().then(function(canvas){
        var 
        img = canvas.toDataURL("image/png"),
        doc = new jsPDF({
          unit:'px', 
          format:'a4'
        });     
        doc.addImage(img, 'JPEG', 20, 20);
        doc.save("{{this.['Student Last Name']}}-{{this.['Student Name']}}-umpire-incident-report.pdf");
        content.width(cache_width);
    });
}

// create canvas object
function getCanvas(){
    content.width((a4[0]*1.33333) -80).css('max-width','none');
    return html2canvas(content,{
        imageTimeout:2000,
        removeContainer:true
    }); 
}

}());
</code></pre>