tengo una página en html que usa JS Highcharts, imágenes, tablas, etc. y estaba buscando exportar todo a un reporte PDF (con tablas, imágenes, etc.). El problema es que dado que Highcharts (y otros gráficos JS) se renderiza en el navegador, no aparece en el pdf generado. Probé JSPdf y PhantomJS pero con esos generadores de "capturas de pantalla" estoy perdiendo todo el estilo y el formato que he creado con xhtml2pdf (portada y contraportada, marcas de agua, etc.).
1 respuesta
Ahí pude resolverlo. Les comparto por si a alguno le sirve: .- Tengo el Template con los gráficos en HighchartsJS. .- Levanto el canvas del gráfico y lo guardo en un input oculto del formulario :
(function (H) {
H.Chart.prototype.createCanvas = function (divId) {
var svg = this.getSVG(),
width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
if (canvas.getContext && canvas.getContext('2d')) {
canvg(canvas, svg);
return canvas.toDataURL("image/jpeg");
}
else {
alert("Your browser doesn't support this feature, please use a modern browser");
return false;
}
}
}(Highcharts));
var imageData = $("#ausentismo_tot").highcharts().createCanvas();
$('#aus_tot_image').val(imageData); //Hidden Input del Formulario
.- Viaja con el submit del Form y lo proceso en el views.py:
aus_tot_image = request.POST['aus_tot_image']
.- Imprimo el pdf y en el template del pdf (procesado con xhtml2pdf) pongo en
<img src="{{ aus_inc_image }}" >