最近产品小姐姐要求将含有highcharts图表的一个页面将其生成PDF文件，于是乎开始在百度上搬砖，发现不经过后端的话，可以用html2canvas将页面生成图片，将其传给jspdf的接口。
首先需要两个js文件html2canvas和jsPdf.dubug.js
直接上代码
//我是进入页面后，自己点击触发事件
$(".pdf_btn").on('click', function () {
var element = $(".conventionReport"); // 这个dom元素是要导出pdf的div容器
var w = element.width(); // 获得该容器的宽
var h = element.height(); // 获得该容器的高
var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
var canvas = document.createElement("canvas");
var abs = 0;
var win_i = $(window).width(); // 获得当前可视窗口的宽度（不包含滚动条）
var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
if (win_o > win_i) {
abs = (win_o - win_i) / 2; // 获得滚动条长度的一半
}
canvas.width = w * 2; // 将画布宽&&高放大两倍
canvas.height = h * 2;
var context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-offsetLeft - abs, -offsetTop);
// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
// translate的时候，要把这个差值去掉
//因为页面中的highcharts图表较多，所以加个定时器，以便于所有图表能加载出来
setTimeout(function () {
//获取要生成PDF的位置，jquery要加[0]
var element = $(".conventionReport")[0];
html2canvas(element).then(function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
console.log(canvas);
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
} else { // 分页
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('生成pdf的名字.pdf');
});
}, 1000);
});
生成的canvas效果如图，
canvas很好生成的，这个就够了
<html>
<head>
<title>试验生成PDF</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body >
<div id="container">
<div id="charts" style="min-width:400px;height:400px">
</div>
</div>
</body>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jsPdf.debug.js"></script>
<script src="highcharts.js"></script>
<script type="text/javascript" >
var chart = Highcharts.chart('charts', {
chart: {
type: 'area'
},
title: {
text: '全球各大洲人口占比'
},
subtitle: {
text: '数据来源: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: '百分比'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} 百万)<br/>',
shared: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: '亚洲',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: '非洲',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: '欧洲',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: '美洲',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: '大洋洲',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
var element = $("#container")[0];
setTimeout(function(){
html2canvas(element).then(function(canvas){
//这句话是容易看到生成的canvas是啥样子
document.body.appendChild(canvas);
});
},1000);
</script>
</html>
总结：
一开始从网上找的很多代码都不是很有用，后来找到这个人的代码，但是也不行，生成的PDF只有本地图片可以生成canvas，跨源的或者是highcharts图表生成的都无法显示，后来才发现是html2canvas的版本问题，要1.0版本以上的才行，所以啊，敲代码不仅要找自己的bug还得注意网上的插件也是有bug的，新人一枚，以后要加油啊。
我是从这里找到解决方法的
https://segmentfault.com/a/1190000015820189
我的代码示例
链接：https://pan.baidu.com/s/1PXrpKlD4jwPIHso7b4R-_Q
提取码：grg9
992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
