需求
工作需求拆讯，一個報表中有10幾個Echarts圖表和一些表述說明凌受，要導出PDF面褐。調(diào)研后直接HTML轉(zhuǎn)PDF導出就行了纬黎，因為所有數(shù)據(jù)都已經(jīng)拿到了，不需要再向后臺請求數(shù)據(jù)闽晦。
使用到的js組件:
html2canvas: 我們可以直接在瀏覽器端使用html2canvas,對整個或局部頁面進行‘截圖’扳碍。但這并不是真的截圖，而是通過遍歷頁面DOM結(jié)構(gòu)仙蛉，收集所有元素信息及相應(yīng)樣式笋敞，渲染出canvas image。
由于html2canvas只能將它能處理的生成canvas image荠瘪，因此渲染出來的結(jié)果并不是100%與原來一致夯巷。但它不需要服務(wù)器參與赛惩，整個圖片都由客戶端瀏覽器生成，使用很方便
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>
活動報告
本次活動共發(fā)送短信XXX條，其中觸達消費者XXX條（占比：XX%）阶牍，短信攔截XXX條（占比：XX%）喷面。
短信觸發(fā)轉(zhuǎn)化XXX人（占比：xx%)，未轉(zhuǎn)化XXX人（占比：XX%）走孽。
共轉(zhuǎn)化XXX人惧辈，其中XXX人領(lǐng)取優(yōu)惠卷（占比：xx%），XXX人未領(lǐng)取優(yōu)惠卷（占比：XX%）磕瓷。
共發(fā)放優(yōu)惠卷XXX張盒齿，其中XXX已核銷（占比：XX%），XXX未核銷（占比：XX%）困食。
優(yōu)惠卷轉(zhuǎn)化銷售金額：XXX元边翁，環(huán)比增長XX%。
新增會員XXX人硕盹，沉睡會員轉(zhuǎn)化XXX人符匾，失活會員轉(zhuǎn)化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瘩例，參數(shù)：圖片格式和清晰度(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
