Fusion Charts导出图片或Pdf

来源：互联网发布：在淘宝上怎么注册店铺编辑：程序博客网时间：2024/04/29 22:50

Fusion Charts设置报表，的确很好用，这里就写一个简单的demo，功能实现一个客户端导出效果

Fusion Charts报表数据是以json数据和xml数据进行控制加载的，这里我们使用xml做演示

客户端下载必要的文件有：

（1）图形文件：如，Pie2D.swf,Column.swf等。

（2）FusionCharts.js 核心文件

（3）FusionChartsExportComponent.js 导出文件必备

（4）FCExporter.swf 导出文件必备

当你出现在您的网页上的多个图表，有三种方式导出使用“导出组件：

One to one - 在页面中的每个图都有它自己的实例出口组件和出口相同。这是最简单的设置，使您可以将导出UI为每个图表无论你希望它是。
Many to one- 在这种模式下，只有一个出口组件的实例。多图他们的数据导出到这个实例。这个实例，然后显示一个UI，其中用户可以选择要保存的图表，以及作为导出格式。
Batch Export Mode - 在这种模式下，再出口组件只有一个实例。多图他们的数据导出到这个实例。所不同的是，在此模式下，输出文件可以是一个单一的文件（即包含所有的图表的图像）。此外，有一些API，可以帮助您自动导出在页面中的所有图表。

我们的示例是做一个One to one的demo，随后的2中方式，请等待下篇...

（1）编写simple.xml文件，注意，编码修改为gbk，否则在界面右键时会成为乱码效果

这里我们将exportEnabled设为1 ，exportAtClient设为1，

其中exportHandler=“fcExporter1”与Exporting.jsp页面中的var myExportComponent = new FusionChartsExportObject("fcExporter1","<%=basePath%>eissys/Charts/FCExporter.swf");对应

<?xml version="1.0" encoding="gbk"?><!-- 这里的编码方式设为gbk， 默认的utf-8方式貌似会乱码，具体原因调查当中 --><chart yAxisName='销售图' caption='销售前5人' exportDialogMessage='正在导出,请稍候...'exportFormats='JPEG=导出为JPG图片|PNG=导出为PNG图片|PDF=导出为PDF文件' numberPrefix='$'useRoundEdges='1' bgColor='FFFFFF,FFFFFF' showBorder='0' exportEnabled='1'exportAtClient='1' exportHandler='fcExporter1' exportDialogColor='e1f5ff'exportDialogBorderColor='0372ab' exportDialogFontColor='0372ab'exportDialogPBColor='0372ab'><set label='亚历克斯' value='25000' /><set label='马克' value='35000' /><set label='大卫' value='42300' /><set label='格雷厄姆' value='35300' /><set label='约翰' value='31300' /></chart>

（2）编写Exporting.jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><script type="text/javascript" src="<%=basePath%>/eissys/Charts/FusionCharts.js"></script><script type="text/javascript" src="<%=basePath%>/eissys/Charts/FusionChartsExportComponent.js"></script><script type="text/javascript">//默认被调用的回调函数，当用户完成他的磁盘保存导出的输出 function FC_Exported(objRtn){if (objRtn.statusCode=="1"){alert("图已成功保存。它的DOM ID为 " + objRtn.DOMId);} else{alert("保存图表的错误。错误消息是: " + objRtn.statusMessage + ". 它的DOM ID为" + objRtn.DOMId);}}// 完成捕获阶段加载完后自动调用的函数function FC_ExportReady(DOMId){    alert("图DOM ID为： " + DOMId + "已完成拍摄模式。现在已经准备好下载。");}//定义一个函数，它会被调用，当用户点击批量出口，启动按钮    调用BeginExport（）API的批处理方法. function initiateExport(){myExportComponent.BeginExport();    }</script></head><body bgcolor="#ffffff"><div id="chartdiv" align="center">图表将出现在这个DIV。该文本将被替换由图</div><script type="text/javascript">var myChart = new FusionCharts("<%=basePath%>eissys/Charts/Column2D.swf", "myChartId", "500", "300", "0", "1");myChart.setDataURL("SimpleExample.xml");myChart.render("chartdiv");</script><div id="fcexpDiv" align="center">FusionCharts的出口处理程序组件...</div><script type="text/javascript">var myExportComponent = new FusionChartsExportObject("fcExporter1","<%=basePath%>eissys/Charts/FCExporter.swf");myExportComponent.Render("fcexpDiv");</script><div id="chartdiv2" align="center">图表将出现在这个DIV。该文本将被替换由图</div><script type="text/javascript">var myChart2 = new FusionCharts("<%=basePath%>eissys/Charts/Column3D.swf","myChartId2", "500", "300", "0", "1");myChart2.setDataURL("SimpleExample2.xml");myChart2.render("chartdiv2");</script><div id="fcexpDiv2" align="center">FusionCharts的出口处理程序组件...</div><script type="text/javascript">var myExportComponent2 = new FusionChartsExportObject("fcExporter2","<%=basePath%>eissys/Charts/FCExporter.swf");myExportComponent2.Render("fcexpDiv2");</script></body></html>

（3）最终的运行效果如图显示: