highchart exporting with phantomjs implementation

问题

I am trying to implement highchart exporting function in my jsp/glassfish website project in which i need charts to be converted to png,jpgs and pdfs formats but in offline mode.i had followed the steps and instruction given in official exporting site but i encountered following issues.

i have downloaded the phantom.js and highchart exporting folder
i change values in "app-convert.properties" file located in "highcharts-export\highcharts-export-web\src\main\webapp\WEB-INF\spring" folder and finally just run mvn command to generate war file (* I dont have any knowledge for mvn i jut followed the steps given in highchart exporting website)
After war file is generated i uploaded it to my glassfish server

So Issues Are

A) When i launched the export app from glassfish i get 404 error for demo page also

I have tried creating phantomjs server on localhost like this #### 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) but when i use export option in chart and click on print i get json parse error

So please folks help me to implement this export function .. if possible please give me step by step instructions for achieving my desired output.

Thanks in advance

回答1:

Although it is too late for an answer but if anyone stumble upon same problem it might be helpful.

After some unsuccessful attempts creating phantomjs server i let go of it and while searching on internet for solution i have came across batik.In Highchart official website they also mentioned batik can be use to export charts. So After some more trials i finally able to export my chart offline and implementation is simple.

To make it work you need batik library files.They have project hosted at github; you can download required jars from there.After downloading entire package i just use batik.jar,batik-transcoder.jar,pdf-transcoder.jar as i want to export my chart only as JPEG,png and pdf.

So i added these libraries in my net-beans project.

Add this code where you initialize your 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 is a one of the option supported by highchart like series,title,plotOption etc. Below is code for printchart function

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

Just ignore panelno it is my custom field however what you have do is save chart option and svg into some variables.You can get them using div id where chart is displayed or more specifically where you declared

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

in my case i have multiple highchart at same page so to identify which chart calls printChart function i have use panelno

here testform is a form i declared inside my page; this form have three hidden input fields for chart type and svg once i have these value i submit the form to another jsp page which handles actual chart exporting.

Write following code in page where you actually exporting chart.

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

thats all your chart is generated by batik and chart file is send to download at client end.

来源：https://stackoverflow.com/questions/20783091/highchart-exporting-with-phantomjs-implementation

标签

jsp

maven

Highcharts

glassfish

phantomjs