时间戳

首页 > 解决方案 > Django PDF 中包含的图表

javascript - Django PDF 中包含的图表

问题描述

我在这里有一个问题，我有一个带有 JS Highcharts、图像、表格等的 html 报告页面，我正在寻找将所有内容导出到 PDF 报告中（带有表格、图像等）。问题是，由于 Highcharts（和其他 JS 图表）是在浏览器中呈现的，因此它不会出现在生成的 pdf 中。我尝试了 JSPdf 和 PhantomJS，但是使用那些“屏幕截图”生成器，我失去了使用 xhtml2pdf 创建的所有样式和格式（封面和封底、水印等）。你能帮我一下吗？

标签： javascriptdjangopdfchartsxhtml2pdf

解决方案

我已经解决了！.- 拥有带有 HighchartsJS 图形的模板。.- 阅读每个图表画布并将它们存储在自己的隐藏输入中：

(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

.- 与发布的信息一起旅行并在views.py中处理它：

aus_tot_image = request.POST['aus_tot_image']

.- 使用 xhtml2pdf 的“render_to_pdf_response”打印 pdf 文件：

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

推荐阅读