1
I’m developing an application that generates a report using Morris charts (https://startbootstrap.com/template-overviews/sb-admin-2/)
The graphics are working properly, now I need to generate a PDF of this chart. However, I came across that to do this, when the graph is SVG is different.
The PDF file is generated, but without the chart (without the bars), only with subtitles.
Follows:
Index.cshtml containing the chart div
<div class="panel-body" id="gerapdf">
<div class="row">
<b><span id="RelatorioItemContrato"></span></b>
<br />
<b><span id="RelatorioMes"></span></b>
<br />
<b><span id="RelatorioAno"></span></b>
<br />
<b><span id="RelatorioAtivo"></span></b>
</div>
<div id="RelatorioDesempenhoDataBarChart"></div> <!--Gráfico-->
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Legenda
</div>
<div class="panel-body" id="legenda-fixa">
</div>
@*<div class="panel-footer">
</div>*@
</div>
</div>
</div>
.JS
var cache_width = $("#gerapdf").width(); //Criado um cache do CSS
var a4 = [595.28, 841.89]; // Widht e Height de uma folha a4
function getPDF() {
// Setar o width da div no formato a4
$("#gerapdf").width((a4[0] * 1.33333) - 80).css('max-width', 'none');
// Aqui ele cria a imagem e cria o pdf
html2canvas($("#gerapdf"), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png", 1.0);
var doc = new jsPDF({ unit: 'px', format: 'a4' });
doc.addImage(img, 'JPEG', 20, 20);
doc.save('NOME-DO-PDF.pdf');
//Retorna ao CSS normal
$("#gerapdf").width(cache_width);
}
});
}
For some reason, the graph is not generated:
I don’t know much javascript/html. Can anyone tell me how to proceed? I’ve searched a lot, I’ve tried a lot, but I still can’t.
Thank you
What you’re using to pass Canvas to PDF?
– Leonel Sanches da Silva
html2canvas.js
– Evandro Silva
It seems that this mistake is famous.
– Leonel Sanches da Silva