Question

我正在尝试在我的highchart网站项目中实施jsp/glassfish导出功能，我需要将图表转换为png,jpgs and pdfs格式，但是在离线模式下。我已按照步骤和在官方出口网站上给出的指示，但我遇到了以下问题。

我已经下载了phantom.js和highchart导出文件夹
我更改位于"highcharts-export\highcharts-export-web\src\main\webapp\WEB-INF\spring"文件夹中的“app-convert.properties”文件中的值最后只需运行mvn命令生成war文件（*我对mvn没有任何了解，我遵循高图出口网站中给出的步骤）
生成战争文件后，我将其上传到我的glassfish服务器

所以问题是

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

我尝试在localhost上创建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;你可以从那里下载所需的罐子。下载整个包装后我只使用batik.jar，batik-transcoder.jar，pdf-transcoder.jar，因为我只想将我的图表导出为JPEG，png和pdf。

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

在初始化高潮图的地方添加此代码

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

export是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();}

只是忽略panelno它是我的自定义字段，但你所做的是将图表选项和svg保存到一些变量中。你可以使用显示图表的div id或更具体地说明你声明的地方来获取它们

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

在我的情况下，我在同一页面有多个高图，所以要确定哪个图表调用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();}

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

使用phantomjs实现的高图输出

1 个答案: