前端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<input type="button" id="download" value="下载">
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
animation: false,
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
option2 = {
animation: false,
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 获取base64图片
var picBase64Info = myChart.getDataURL();
//创建form提交图片数据
var postDownLoadFile = function (options) {
var config = $.extend(true, { method: 'post' }, options);
var $iframe = $('<iframe id="down-file-iframe" />');
var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
$form.attr('action', config.url);
//图片
$form.append('<input type="hidden" name="base64Info" value="' + config.data + '" />');
$iframe.append($form);
$(document.body).append($iframe);
$form[0].submit();
$iframe.remove();
}
//触发下载功能
$("#download").on('click',
function() {
var param={};
postDownLoadFile({
url:"${BASE_PATH}/admin/dataanalyze/exportPDF",
data:picBase64Info,
method:'post'
});
});
</script>
</body>
</html>
导出PDF一定要关闭动画animation: false,
后端:
导入Itext相关jar包
后端框架为jfinal,若为其他适当修改即可
/**
*
* @throws DocumentException
* @throws Exception
* @Description 导出PDF
* @category
* @author 张银彪
* @date 2019年6月27日 上午9:26:38
*/
public void exportPDF() throws DocumentException, Exception {
Document document = new Document(PageSize.A4, 50, 50, 50, 50); // 创建文档
// 大小
try {
String path = getSession().getServletContext().getRealPath(Preference.DOWN_DIR); // 基础路径
PdfWriter writer = PdfWriter.getInstance(document, new FileOutputStream(path + "/" + System.currentTimeMillis()+".pdf")); // 保存路径
Rectangle rect = new Rectangle(36, 54, 559, 788);
rect.setBorderColor(BaseColor.BLACK);
writer.setBoxSize("art", rect);
HeaderFooter header1 = new HeaderFooter(); // 设置页脚
writer.setPageEvent(header1);
Font font = PdfTool.setChineseFont(); // 正文字体
File fpath = new File(PathKit.getWebRootPath() + Preference.PDF_FONT_PATH);
BaseFont bfChinese = BaseFont.createFont(fpath.getPath(), BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
Font font2 = new Font(bfChinese, 8, Font.NORMAL); // 数据表字体
Font fontRed = new Font(bfChinese, 8, Font.NORMAL, new BaseColor(255, 0, 0)); // 数据表示异常字体(红色)
document.open();// 打开文档
// 基本信息
PdfPTable header = new PdfPTable(4);
header.setSpacingBefore(5);
header.setSpacingAfter(5);
PdfPCell baseinfoheader = new PdfPCell(); // 设置抬头
Paragraph paragraph = new Paragraph("数据图表", font);
paragraph.setAlignment(1);
paragraph.setSpacingBefore(25);
baseinfoheader.setColspan(4);
baseinfoheader.setBackgroundColor(new BaseColor(185, 185, 185));
baseinfoheader.setUseAscender(true);
baseinfoheader.setVerticalAlignment(Element.ALIGN_MIDDLE);
baseinfoheader.addElement(paragraph);
header.addCell(baseinfoheader);
// 插入一行--展示通道名称
PdfPCell insert_h1 = new PdfPCell(new Phrase("图表", font));
//header.addCell(insert_h1);
String imgUrl = getRequest().getParameter("base64Info");
String[] imgUrlArr = imgUrl.split("base64,");//拆分base64编码后部分
// byte[] buffer = new BASE64Decoder().decodeBuffer(imgUrlArr[1]);
String string = imgUrlArr[1];
byte[] buffer= Base64.getDecoder().decode(string);
PdfPCell insert_h2 = new PdfPCell(Image.getInstance(buffer));
insert_h2.setColspan(4);
header.addCell(insert_h2);
PdfPTable mheader = new PdfPTable(4);
mheader.setSpacingBefore(5);
mheader.setSpacingAfter(5);
PdfPTable mytable = new PdfPTable(1); // 插入图片
document.add(header); // 文件头部
document.add(mytable); // 历史记录列表头部
document.newPage(); // 前面通道结束后 另起一页显示新通道
} catch (Exception e) {
e.printStackTrace();
}
document.close();
}