将highcharts图表导出为图片或pdf文档

本文介绍如何将Highcharts图表导出为图片或PDF文档。通过设置Highcharts的exporting属性,可以配置导出的文件名、类型等参数。在后台,使用Apache Batik库进行转换,根据不同的导出类型如PNG、JPEG、SVG或PDF进行处理。

实例:

function brandPie(args_datetime){

  var demis=window.document.getElementById("first").value;

  var chart;

        $.ajax({

           type: "post",

           data: {demision:"3",queryDate:args_datetime},

           url: "report/dogetItemPieOrColumn.action?queryType="+queryType,

           success: function(data) {

              var jsonarray=eval('('+data+')');

              var pieData=jsonarray.data;

              chart = new Highcharts.Chart({

            chart: {

                renderTo: 'containerPie2',

                plotBackgroundColor: null,

                plotBorderWidth: null,

                plotShadow: false

            },

            title: {

                text: 'test'

            },

            subtitle: {

                    text: "日期:"+args_datetime,

                    x: -20

                   },

            tooltip: {

                percentageDecimals:2,

              pointFormat: '{series.name}:{point.percentage}%',

             

            },

            credits : {

             enabled : false ,

           } ,

           

 

 

exporting:{

                  filename:'测试',

                     url:'chart/doexport.action',

                  },

             plotOptions: {

                pie: {

                    allowPointSelect: true,

                    cursor: 'pointer',

                    dataLabels: {

                        enabled: false

                    },

                    showInLegend: true

                }

            },

            series: [{

                type: 'pie',

                name: '占比',

                data: pieData

            }]

        });

  }

 });

}

上例中:exporting属性主要是用与导出的,其中filename表示到处后的文件名,url表示导出处理的action。默认请求传的参数为type:表示要导出的文件类型(.jpg/pdf filename:表示导出的文件名;svg:表示导出时的一些参数。

后台处理的action:

import java.io.IOException;

import java.io.StringReader;

 

import javax.servlet.ServletOutputStream;

import javax.servlet.http.HttpServletResponse;

 

import org.apache.batik.transcoder.Transcoder;

import org.apache.batik.transcoder.TranscoderException;

import org.apache.batik.transcoder.TranscoderInput;

import org.apache.batik.transcoder.TranscoderOutput;

import org.apache.batik.transcoder.image.JPEGTranscoder;

import org.apache.batik.transcoder.image.PNGTranscoder;

import org.apache.fop.svg.PDFTranscoder;

 

@SuppressWarnings("serial")

public class ChartsExportAction extends BaseAction {

 

   private String type;

   private String svg;

   private String filename;

 

   public void setFilename(String filename) {

      this.filename = filename;

   }

 

   public String getFilename() {

      return filename;

   }

 

   public void setSvg(String svg) {

      this.svg = svg;

   }

 

   public String getSvg() {

      return svg;

   }

 

   public void setType(String type) {

      this.type = type;

   }

 

   public String getType() {

      return type;

   }

 

   public String export() {

      String type = this.getType();

      String svg = this.getSvg();

      HttpServletResponse response = null;

      System.out.println(svg);

      ServletOutputStream outputStream = null;

      try {

        response = this.getResponse();

        outputStream= response.getOutputStream();

        System.out.println("type:"+type);

        if (null != type && null != svg) {

           svg = svg.replaceAll(":rect", "rect");

           String ext = "";

           Transcoder t = null;

 

           if (type.equals("image/png")) {

              ext = "png";

              t = new PNGTranscoder();

 

           } else if (type.equals("image/jpeg")) {

              ext = "jpg";

              t = new JPEGTranscoder();

 

           } else if (type.equals("image/svg+xml")) {

              ext = "svg";

           } else if (type.equals("application/pdf")) {

                   ext = "pdf";

                   t = new PDFTranscoder();

              }

 

           response.addHeader("Content-Disposition",

                 "attachment;filename="

                      + java.net.URLEncoder.encode(

                            this.getFilename(), "UTF-8") + "."

                      + ext);

           response.addHeader("Content-Type", type);

 

           if (null != t) {

              TranscoderInput input = new TranscoderInput(

                    new StringReader(svg));

              TranscoderOutput output = new TranscoderOutput(outputStream);

              try {

                 t.transcode(input, output);

              } catch (TranscoderException e) {

                 outputStream

                      .print("Problem transcoding stream. See the web logs for more details.");

                 e.printStackTrace();

              }

 

           } else if (ext == "svg") {

              outputStream.print(svg);

           } else {

              outputStream.print("Invalid type: " + type);

           }

        } else {

           response.addHeader("Content-Type", "text/html");

           outputStream

                 .println("Usage:\n\tParameter[svg]: The DOM Element to be converted.\n\tParameter [type]: The destinationMIME type for the elment to be transcoded.");

        }

        outputStream.flush();

      } catch (Exception e) {

        // TODO: handleexception

        e.printStackTrace();

      } finally {

        if (outputStream!= null)

           try {

              outputStream.close();

           } catch (IOException e) {

              // TODO Auto-generatedcatch block

              e.printStackTrace();

           }

      }

      return null;

   }

}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值