周热销排行
用户评论（0）
在此可输入您对该资料的评论~
添加成功至
资料评价：系统发生错误
文档【】不存在或已删除！
等待时间： 6Java 实现 FusionCharts 图表导出图片或PDF文件功能
第一步：引入FusionCharts文件，使用的版本为：FusionCharts 3.2.1（额，共享版，你懂的，后续提供下载链接）支持正版，官网地址：https://www.fusioncharts.com/
第二步：引入fcexporter.jar包（图片导出功能库），并在web.xml文件中配置以下代码
FCExporter
FCExporter
com.fusioncharts.exporter.servlet.FCExporter
FCExporter
/FCExporter
第三步：添加测试xml文件，实际开发中应使用动态URL模式，否则会有缓存
第四步：编写JSP文件
&%@ page language=java contentType=text/ charset=UTF-8
pageEncoding=UTF-8%&
&script type=text/javascript src=${pageContext.request.contextPath}/scripts/jquery-1.8.3.min.js&&/script&&script type=text/javascript src=${pageContext.request.contextPath}/plugins/FusionCharts 3.2.1/Scripts/FusionCharts.js&&/script&&script type=text/javascript src=${pageContext.request.contextPath}/plugins/FusionCharts 3.2.1/Scripts/FusionChartsExportComponent.js&&/script&&script type=text/javascript&|r| $(function () {|r| var chart = new FusionCharts(${pageContext.request.contextPath}/plugins/FusionCharts 3.2.1/Charts/Pie3D.swf, chart, 720, 420);|r| chart.setDataURL(${pageContext.request.contextPath}/database/chartData.xml);|r| chart.render(pChart);|r| });|r| &/script&www.2cto.com
第五步：启动项目，查看效果吧~Echarts图表之插件生成PDF下载
需要用到的插件：
src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"&&
src="js/jspdf.min.js" type="text/javascript" charset="utf-8"&&
src="js/echarts3.js" type="text/javascript" charset="utf-8"&&
html2canvas：将页面的dom元素转为图片的形式
jspdf：页面端的生成pdf工具，可以跳过后台进行下载。
echart：图表生成插件
页面代码：
&!DOCTYPE html&
charset="utf-8" /&
id="main" style="height:400px"&&
onclick="convertCanvasToImage()"&download pdf&
src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"&&
src="js/jspdf.min.js" type="text/javascript" charset="utf-8"&&
src="js/echarts3.js" type="text/javascript" charset="utf-8"&&
type="text/javascript"&
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: 'white',
text: 'ECharts 入门示例'
tooltip: {},
data: ['销量']
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
myChart.setOption(option);
type="text/javascript"&
function convertCanvasToImage() {
html2canvas(document.getElementById('main'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
createPDFObject(canvas.toDataURL("image/jpeg"));
function createPDFObject(imgData) {
var doc = new jsPDF('p', 'pt');
doc.addImage(imgData, 5, 5, 600, 300, 'img');
doc.save('test.pdf')
①Echarts的option里面一定要设置背景颜色，否则的话，jspdf插件会默认将黑色作为背景色。
②因为只需要添加图表到pdf，所以设置字体的一些代码按需添加。
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！fusioncharts图表导出为pdf或Word或Excel
[问题点数：100分，结帖人bsbbt]
本版专家分：827
CSDN今日推荐
本版专家分：12248
本版专家分：37619
2009年11月 Java大版内专家分月排行榜第一
2010年2月 Java大版内专家分月排行榜第二
2011年7月 Java大版内专家分月排行榜第三2010年1月 Java大版内专家分月排行榜第三2009年12月 Java大版内专家分月排行榜第三
本版专家分：26325
2009年10月 总版技术专家分月排行榜第二
2009年10月 Java大版内专家分月排行榜第一
2009年11月 Java大版内专家分月排行榜第二
本版专家分：827
本版专家分：143
本版专家分：827
本版专家分：11903
2007年11月 Java大版内专家分月排行榜第一2007年10月 Java大版内专家分月排行榜第一
本版专家分：827
本版专家分：0
本版专家分：827
本版专家分：0
本版专家分：6
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：827
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：806
本版专家分：0
本版专家分：5
本版专家分：0
本版专家分：0
本版专家分：0
匿名用户不能发表回复！|}