需求
工作需求，一个报表中有10几个Echarts图表和一些表述说明，要导出PDF。调研后直接HTML转PDF导出就行了，因为所有数据都已经拿到了，不需要再向后台请求数据。
使用到的js组件:
html2canvas: 我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。
由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便
jsPDF：jsPDF库可以用于浏览器端生成PDF
gayhub找到一个例子，但是没有Echarts图表，改之添加test5.html。
页面简单改的，添加了Echarts和一个div简单表述说明
<!DOCTYPE>
<html>
<head>
<title>
html2canvas example
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: white;
}
header, section {
overflow: hidden;
}
ul {
margin: 0;
border: 0;
padding: 0;
}
li {
display: block; /* i.e., suppress marker */
color: black;
height: 4em;
width: 25%;
margin: 0;
float: left;
background-color: green;
text-align: center;
line-height: 4em;
}
aside {
width: 20%;
float: left;
text-align: center;
}
aside a {
display: block;
height: 4em;
color: blue;
}
article {
padding: 2em 0;
width: 80%;
float: left;
}
</style>
</head>
<body>
<section>
<article>
<h3 style="center">XXX营销策略报告</h3>
<div id="main" style="height:200px"></div>
<div id="chart1" style="height:200px"></div>
<button id="renderPdf">DOWNLOAD PDF</button>
<p>
活动报告
本次活动共发送短信XXX条，其中触达消费者XXX条（占比：XX%），短信拦截XXX条（占比：XX%）。
短信触发转化XXX人（占比：xx%)，未转化XXX人（占比：XX%）。
共转化XXX人，其中XXX人领取优惠卷（占比：xx%），XXX人未领取优惠卷（占比：XX%）。
共发放优惠卷XXX张，其中XXX已核销（占比：XX%），XXX未核销（占比：XX%）。
优惠卷转化销售金额：XXX元，环比增长XX%。
新增会员XXX人，沉睡会员转化XXX人，失活会员转化XXX人。
</p>
</article>
</section>
<script type="text/javascript" src="./js/html2canvas.js"></script>
<script type="text/javascript" src="./js/jsPdf.debug.js"></script>
<script src="./js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: 'white',
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
var myChart1 = echarts.init(document.getElementById('chart1'));
var option1 = {
backgroundColor: 'white',
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart1.setOption(option1);
</script>
<script type="text/javascript">
var downPdf = document.getElementById("renderPdf");
downPdf.onclick = function() {
html2canvas(document.body, {
onrendered:function(canvas) {
//返回图片URL，参数：图片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
var pdf = new jsPDF('', 'pt', 'a4');
//需要dataUrl格式
pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
pdf.save('content.pdf');
}
})
}
</script>
</body>
</html>
导出:
jspdf.png
