I am trying to generate a PDF of a page made in HTML. This page has a chart created with Chart Js. I would like to click on the button to generate a PDF of the chart.
But, clicking the button nothing happens.
I'm using html2canvas (because I've been reading that it is necessary to first convert the file to PNG).
I am using jspdf to convert the file to PDF.
See the code:
$('#gerar-pdf').on('click', function() {
html2canvas(document.querySelector("container-canvas"), {
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');
}
});
});<!DOCTYPE html>
<html lang="pt-BR">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Aprendendo</title>
<link href="_bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- ARQUIVO CSS DO BOOTSTRAP -->
<link href="_chart/dist/Chart.css" rel="stylesheet">
<script src="_chart/dist/Chart.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<h1 class="text-center">Gráficos de Status das Atividades</h1>
</div>
</div>
<div class="container-fluid" id="container-canvas">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<canvas id="canvas_status_atividades" width="400" height="400"></canvas>
</div>
</div>
<div class="row">
<div class="col-lg-8 offset-lg-2">
<button class="btn btn-primary" id="gerar-pdf">Gerar PDF</button>
</div>
</div>
</div>
<script src="_jquery/jquery-3.3.1.min.js"></script>
<!-- ARQUIVO JQUERY -->
<script src="_bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- ARQUIVO BOOTSTRAP -->
<script src="_jsPDF/dist/jspdf.min.js"></script>
<!-- ARQUIVO jspdf -->
<script src="_html2canvas/html2canvas.js"></script>
<!-- ARQUIVO html2canvas -->
<script src="scripts/script.js"></script>
</body>
</html>NOTE: The Chart is generated without problems with Chart JS:
- Can you help me ?
