Echart⽣成的报表导出为PDF Echart官⽹定制js，选择需要的模块⽣成echart-min.js
1.前端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引⼊ echarts.js -->
<script src="echarts.js"></script>
<script src="code.jquery/jquery-3.1.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div id="main" ></div>
<input type="button" id="download" value="下载">
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('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'
setoption
},
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 = DataURL();
//创建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="' + hod + '" />');
$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();
$ve();
}
//触发下载功能
$("#download").on('click',
function() {
var param={};
postDownLoadFile({
url:"${BASE_PATH}/admin/dataanalyze/exportPDF",
data:picBase64Info,
method:'post'
});
});
</script>
</body>
</html>
2.后端
/**
*
* @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 = Instance(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 WebRootPath() + Preference.PDF_FONT_PATH);
BaseFont bfChinese = Path(), 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=  Decoder().decode(string);
PdfPCell insert_h2 = new Instance(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); // 历史记录列表头部
} catch (Exception e) {
e.printStackTrace();
}
document.close();
}
3.后⾯补充SpringBoot的代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。