Jsp highchart导出与phantomjs实现

Jsp highchart导出与phantomjs实现,jsp,maven,highcharts,glassfish,phantomjs,Jsp,Maven,Highcharts,Glassfish,Phantomjs,我试图在我的jsp/glassfish网站项目中实现highchart导出功能,在该项目中,我需要将图表转换为png、jpgs和pdfs格式,但处于脱机模式。我遵循了官方导出网站中给出的步骤和说明,但遇到了以下问题 我已经下载了phantom.js和highchart导出文件夹 我更改位于文件夹“highcharts export\highcharts export web\src\main\webapp\web-INF\spring”中的“app convert.properties”文件中的

我试图在我的
jsp/glassfish
网站项目中实现
highchart
导出功能,在该项目中,我需要将图表转换为
png、jpgs和pdfs
格式,但处于脱机模式。我遵循了官方导出网站中给出的步骤和说明,但遇到了以下问题

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

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

  • 生成war文件后,我将其上载到我的
    glassfish
    服务器

  • 所以问题是

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

    • 我尝试过在本地主机上创建
      phantomjs
      服务器,就像这样
      #####phantomjs“D:\Atul\Work\current\export-study\export-server\phantomjs\highcharts-convert.js”-host 127.0.0.1-端口3003####(哈希仅用于暗示命令)
      但当我在图表中使用export选项并单击print时,我得到了json解析错误
    所以请大家帮我实现这个导出功能。。如果可能的话,请给我一步一步的指导,以实现我想要的输出


    提前感谢

    虽然现在回答问题已经太晚了,但如果有人遇到同样的问题,这可能会有所帮助

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

    为了让它工作,你需要蜡染库文件;您可以从那里下载所需的jar。下载整个软件包后,我只需使用batik.jar、batik transcoder.jar、pdf-transcoder.jar,因为我只想将图表导出为JPEG、png和pdf格式

    所以我在我的NetBeans项目中添加了这些库

    在初始化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
            }]
        }
    }}
    
    导出是highchart支持的选项之一,如系列、标题、绘图选项等。 下面是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,以便确定哪些图表调用了我使用的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();}
    

    这就是您的所有图表都是由batik生成的,图表文件被发送到客户端下载。

    好的,
    demo
    不起作用,但您是否尝试导出图表?第一次更改url:
    导出:{url:'http://new.server.com/highcharts-export“}
    然后尝试通过导出模块导出图表。然后将服务器日志中的错误以及尝试导出图表后显示的内容粘贴到此处。