Charts included in Django PDF

Question

I have an issue here, I have a html report page with JS Highcharts, images, tables etc and I was looking for exporting everything into a PDF report (with tables, images, etc). The problen is that since Highcharts (and other JS charts) are rendered in the browser It doesn't appears in the generated pdf. I tried JSPdf and PhantomJS but with those "screenshots" generators I'm losing all the style and the format that I've created with xhtml2pdf (cover and back pages, watermarks, etc). Can you give me a hand here?

Answer 1

I've resolved it. .- Have the Template with HighchartsJS graphics. :- Read each chart canvas and store them in their own hidden input with:

(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

.- Travels with the Posted info and process it in views.py:

aus_tot_image = request.POST['aus_tot_image']

.- Print the pdf file with xhtml2pdf's "render_to_pdf_response":

<img src="{{ aus_inc_image }}" >