JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.rawgit.com/MrRio/jsPDF/master/dist/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.js "></script>
<canvas id="myChart" width="400" height="400"></canvas>
<button type="button">gerar pdf</button>
JavaScript
// função apenas de exemplo que cria um gráfico simples com Chart.js
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// função que transforma canvas em imagem e exporta para PDF
// você pode usar $(.'elemento').click()
// do jQuery para disparar a função
$('button').on('click', function(){
html2canvas($('#myChart'), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var pdf = new jsPDF('p', 'mm');
pdf.addImage(imgData, 'PNG', 10, 10);
pdf.save('test.pdf');
}
});
});