Я пытаюсь создать PDF страницу, созданную в HTML. На этой странице есть диаграмма, созданная с помощью диаграммы Js. Я хотел бы нажать на кнопку, чтобы создать PDF-диаграмму.
Но, нажав кнопку, ничего не происходит.
Я использую html2canvas (потому что я читал, что необходимо сначала преобразовать файл в PNG).
Я использую jspdf для преобразования файла в PDF.
Смотрите код:
$('#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>
ПРИМЕЧАНИЕ : Диаграмма генерируется без проблем с диаграммой JS:
