使用 phantomjs 实现的 highchart 导出

Question

我正在尝试在我的jsp/glassfish 网站项目中实现highchart 导出功能，在该项目中我需要将图表转换为png,jpgs and pdfs 格式但处于离线模式。我已按照官方导出站点中给出的步骤和说明进行操作但我遇到了以下问题。

1. 我已经下载了 phantom.js 和 highchart 导出文件夹

2. 我更改了位于 "highcharts-export\highcharts-export-web\src\main\webapp\WEB-INF\spring" 文件夹中的“app-convert.properties”文件中的值 最后只需运行 mvn 命令即可生成 war 文件 (* 我对 mvn 没有任何了解，我只是按照 highchart 导出网站中给出的步骤进行操作)

3. 生成war文件后，我将其上传到我的glassfish服务器

所以问题是

A) 当我从 glassfish 启动导出应用程序时，演示页面也出现 404 错误

• 我已经尝试在本地主机上创建phantomjs 服务器，就像这样#### phantomjs "D:\Atul\Work\current\export-study\exporting-server\phantomjs\highcharts-convert.js" -host 127.0.0.1 -port 3003 #### (hashes are just for implying command) 但是当我在图表中使用导出选项并单击打印时，我得到 json 解析错误

所以请大家帮我实现这个导出功能。如果可能的话，请给我一步一步的指导来实现我想要的输出。

提前致谢

Answer 1

虽然现在回答为时已晚，但如果有人偶然发现同样的问题，它可能会有所帮助。

在创建 phantomjs 服务器的尝试失败后，我放弃了它，在互联网上搜索解决方案时，我遇到了蜡染。在 Highchart 官方网站上，他们还提到蜡染可用于导出图表。所以经过更多的试验，我终于能够离线导出我的图表并且实现很简单。

要使其工作，您需要蜡染库文件。他们的项目托管在 github；您可以从那里下载所需的 jars。下载整个包后，我只使用 batik.jar、batik-transcoder.jar、pdf-transcoder.jar，因为我只想将图表导出为 JPEG、png 和 pdf。

所以我在我的 net-beans 项目中添加了这些库。

在初始化 highchart 的地方添加此代码

exporting: {
buttons: {
    contextButton: {
        menuItems: [{
            text: 'Export to PNG',
            onclick: function() {
                printChart(panelno,"image/png");
            }
        }, {
            text: 'Export to JPEG',
            onclick: function() {
                printChart(panelno,"image/jpeg");
            },
            separator: false
        },{
            text: 'Export to PDF',
            onclick: function() {
                printChart(panelno,"application/pdf");
            },
            separator: false
        }]
    }
}}

exporting 是 highchart 支持的选项之一，如 series、title、plotOption 等。 下面是 printchart 函数的代码

function printChart(panelno,printtype){
var chart = $k('#container'+panelno+panelno).highcharts();
var options = chart.options.exporting;
var svg=chart.getSVG();   


$k("#mytype").val(printtype);
$k("#mysvg").val(svg);
$k("#myfile").val("chart");
$k("#testform").submit();}

只需忽略面板，它是我的自定义字段，但是您要做的是将图表选项和 svg 保存到一些变量中。您可以使用显示图表的 div id 或更具体地声明的位置获取它们

<div id="highchart"></div>

在我的情况下，我在同一页面上有多个 highchart，以便识别哪个图表调用 printChart 函数，我使用了 panelno

这里的 testform 是我在页面中声明的表单；此表单具有图表类型和 svg 的三个隐藏输入字段，一旦我有了这些值，我将表单提交到另一个处理实际图表导出的 jsp 页面。

在您实际导出图表的页面中编写以下代码。

try {
String ctype = request.getParameter("charttype");
String svg = request.getParameter("svg");
String filename = request.getParameter("filename");


if (filename == null && filename.equals("")) {
    filename = "chart";
}

String ext = "";
Transcoder transcoder = null;
ServletOutputStream outp = response.getOutputStream();

if (!ctype.equals("image/svg+xml")) {
    InputStream svgInputStream = new ByteArrayInputStream(svg.getBytes());

    if (ctype.equals("image/png")) {
        ext = "png";
        transcoder = new PNGTranscoder();
    } else if (ctype.equals("image/jpeg")) {
        ext = "jpg";
        transcoder = new JPEGTranscoder();
    } else if (ctype.equals("application/pdf")) {
        ext = "pdf";
        transcoder = new PDFTranscoder();
    }

    response.setHeader("Content-disposition", "attachment; filename=" + filename + "." + ext);
    ////response.setHeader("Content-type", type);
    response.setContentType("application/download");

    TranscoderInput tInput = new TranscoderInput(svgInputStream);
    TranscoderOutput lOutput = new TranscoderOutput(outp);
    transcoder.transcode(tInput, lOutput);
} else {
    ext = "svg";

    response.setHeader("Content-disposition", "attachment; filename=" + filename + "." + ext);
    response.setHeader("Content-type", ctype);
  //  out.write(svg.getBytes());
}
outp.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();}

您的所有图表都是由蜡染生成的，图表文件发送到客户端下载。