0

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 1

0

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 }}" >

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.