JSFiddle - React, Tailwind, and code Playground

by oterox

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.min.js"></script>
<div id="placeholder" style="width:600px;height:300px"></div>

<a id="generate">Generate</a>

JavaScript

var _canvas = null;

$(function() {
    $.plot($("#placeholder"), [ { label: 'Test', data: [[0, 0], [1, 1]] } ], { yaxis: { max: 1 } });
    
    $("#generate").on("click", function(e) {
        e.preventDefault();
        
            html2canvas($("#placeholder").get(0), {
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);
                    
                    var imgData = canvas.toDataURL('image/png');
                    console.log('Report Image URL: '+imgData);
                    var doc = new jsPDF('landscape');
                    
                    doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
                    doc.save('sample-file.pdf');
                }
            });
    });
});