JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<script src="http://www.flotcharts.org/javascript/flashcanvas/flashcanvas.js"></script>
<script src="http://yourjavascript.com/04131271074/html2canvas.js"></script>
<script src="http://yourjavascript.com/47112101241/jspdf-min.js"></script>
<script src="http://yourjavascript.com/11304110244/jspdf-plugin-addimage.js"></script>
<div class="container1" style="width:5000px;height:330px"></div>
<div class="container2" style="width:330px;height:330px"></div>
<div class="container3" style="width:330px;height:330px"></div>
<a id="toPdf">Generate pdf </a>
JavaScript
var _canvas = null;
$(function () {
$.plot($(".container1"), [{
label: 'Testing1',
data: [
[0, 0],
[1, 9]
]
}], {
yaxis: {
max: 1
}
});
$.plot($(".container2"), [{
label: 'Testing2',
data: [
[0, 0],
[1, 9]
]
}], {
yaxis: {
max: 1
}
});
$.plot($(".container3"), [{
label: 'Testing3',
data: [
[0, 0],
[1, 9]
]
}], {
yaxis: {
max: 1
}
});
window.allcanvas = [];
$("#toPdf").on("click", function (e) {
e.preventDefault();
var allcontainers = $('[class^="container"]');
allcontainers.each(function (index, elem) {
html2canvas($(elem).get(0), {
onrendered: function (canvas) {
window.allcanvas.push(canvas);
if(allcontainers.length == allcanvas.length){
finalpdf();
}
}
});
});
});
finalpdf = function(){
var doc = new jsPDF('landscape');
for(var i = 0; i<allcanvas.length;i++){
var imgData = allcanvas[i].toDataURL('image/jpeg');
doc.addImage(imgData, 'JPEG', 10, 10, 190, 95);
if(i != allcanvas.length-1)
doc.addPage();
}
doc.save('testingPDF.pdf');
};
});