将Highcharts导出为PDF(使用javascript和本地服务器 - 没有互联网连接)

Question

我在我的应用程序中使用Highcharts(没有任何互联网连接)

我在html页面上有多个图表,我想生成一个PDF报告,其中包含此页面中的所有图表.

如何在不将数据发送到互联网上的任何服务器的情况下执行此操作？

我将感谢您提供的任何帮助或任何示例.先感谢您 :)

Answer 1

是的,这是可能的,但涉及一些不同的库来工作.第一个库是jsPDF,它允许在浏览器中创建PDF.第二个是canvg,允许渲染和解析SVG,虽然它可以渲染svg到canvas元素,但真的很酷.最后是Highcharts导出模块,它允许我们将svg发送到canvg转变为数据URL,然后可以将其提供给jsPDF以变成你的pdf.

这是一个示例http://fiddle.jshell.net/leighking2/dct9tfvn/您还可以在那里看到您需要包含在项目中的源文件.

因此,启动highcharts提供了一个使用canvg导出的示例,将图表另存为png.因为你想要一个pdf中的所有iamges,为了我们的目的只是返回数据网址

// create canvas function from highcharts example http://jsfiddle.net/highcharts/PDnmQ/
(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));

然后,对于示例,我已按下按钮设置导出.这将查找某个类的所有元素(因此选择一个添加到所有图表元素),然后调用它们的highcharts.createCanvas函数.

$('#export_all').click(function () {
    var doc = new jsPDF();

    // chart height defined here so each chart can be palced
    // in a different position
    var chartHeight = 80;

    // All units are in the set measurement for the document
    // This can be changed to "pt" (points), "mm" (Default), "cm", "in"
    doc.setFontSize(40);
    doc.text(35, 25, "My Exported Charts");

    //loop through each chart
    $('.myChart').each(function (index) {
        var imageData = $(this).highcharts().createCanvas();

        // add image to doc, if you have lots of charts,
        // you will need to check if you have gone bigger 
        // than a page and do doc.addPage() before adding 
        // another image.

        /**
        * addImage(imagedata, type, x, y, width, height)
        */
        doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
    });


    //save with name
    doc.save('demo.pdf');
});

这里需要注意的是,如果您有很多图表,则需要将它们放在新页面上.jsPDF的文档看起来真的已经过时了(它们确实有一个很好的演示页面,虽然解释所有可能的选项并不是很多),有一个addPage()函数,然后你可以玩宽度和高度,直到找到一些东西作品.

最后一部分是仅使用额外选项设置图形,以便不在每个通常显示的图形上显示导出按钮.

//charts
$('#chart1').highcharts({
    navigation: {
            buttonOptions: {
                enabled: false
            }
        },

//this is just normal highcharts setup form here for two graphs see fiddle for full details

结果并不是太糟糕我对图表的质量印象深刻,因为我对此没有太多期待,有些玩pdf的位置和尺寸看起来非常好.

这是一个屏幕截图,显示导出之前和之后的网络请求,当导出时没有请求http://i.imgur.com/ppML6Gk.jpg

这是一个pdf看起来像http://i.imgur.com/6fQxLZf.png的例子(当作为实际的pdf查看时看起来更好)

在本地https://github.com/leighquince/HighChartLocalExport上试用的快速示例