使用到了使用html2canvas和jspdf
html2canvas是一个将Dom节点生成canvas的库,在这里主要用来生成canvas.
https://html2canvas.hertzen.com/
jspdf是一个生成pdf的开源库,可将图片等保存为pdf
http://raw.githack.com/MrRio/jsPDF/master/docs/module-addImage.html
可以npm install安装相关的依赖或者在index.html里<head></head>加入以下两句
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
定义一个全局的函数fn
window.fn = function(id, name) { //id为dom节点的id,name为要导出的文件的名字
var target = document.getElementById(id);
target.style.background = "#FFFFFF"; //可以改变dom节点样式
// target.style.marginLeft = '28px'
// target.style.marginRight = '28px'
// target.style.marginTop = '28px'
html2canvas(target, {scale: 2, spi: 400}).then(function(canvas) {
// document.body.appendChild(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 = 10;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 820.89;
var imgHeight = 560.28;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//toDataURL用来导出<canvas>元素上的图像
//l纵向 p横向
var pdf = new jsPDF('l', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 10, 10, imgWidth, imgHeight);
} else { // 分页
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 10, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save(`${name}.pdf`)
});
}