![9166166-8b7669c9c907159b.jpg](https://i-blog.csdnimg.cn/blog_migrate/8ddb47d47bb4ea5f17fe2ea07d6854c9.jpeg)
Html To Pdf
最近项目中有将报告页面转成pdf的需求,为了方便,想在js中转化,然后找了一下,发现html2canvas好像满足这个需求,尝试了一下,基本上能实现html转pdf。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script src="~/Content/js/html2canvas.js"></script>
<script>
var downPdf = document.getElementById("exportToPdf"); // 转换按钮
downPdf.onclick = function () {
// 要导出pdf的节点
var elements = document.getElementsByClassName("pdf_page"); // 需要转换的页面节点
var imgMap = new Map();
for (var index = 0; index < elements.length; index++) {
var mapIndex = index;
html2canvas(elements[index], {
useCORS: true, // 是否允许网页中img元素跨域,这个设置需要img元素支持及服务器支持
scale: 2, // 这个影响生成图片的清晰度
background: "#F5F5F5" //背景
}).then((canvas) => {
var img = new Image();
img.width = canvas.width;
img.height = canvas.height;
img.src = canvas.toDataURL('image/jpeg', 1.0);
imgMap.set(mapIndex, img); // 按照顺序保存图片
if(imgMap.size == elements.length) { // 当所有图片都转化完毕,则进行保存操作
var pdf = new jsPDF('', 'pt', 'a4');
for(var i = 0; i < imgMap.size; i++) {
// canvas尺寸
var canvasWidth = imgMap.get(i).width;
var canvasHeight = imgMap.get(i).height;
var pageData = imgMap.get(i).src;
addOneImg(pdf, pageData, canvasWidth, canvasHeight);
if(i < imgMap.size-1) {
pdf.addPage(); // 如果还有图片未添加到pdf,则增加一个页面
}
}
// 所有图片添加完毕,保存
pdf.save("report_"+checkId+".pdf");
}
});
};
}
// img转化为pdf并保存
var addOneImg = function (pdf, pageData, canvasWidth, canvasHeight) {
// a4纸的尺寸[595.28,841.89]
var a4Width = 595.28;
var a4Height = 841.89;
//html页面生成的canvas在pdf中图片的宽高
var imgWidth = a4Width;
var imgHeight = a4Width / canvasWidth * canvasHeight;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = canvasWidth / a4Width * a4Height;
addPages(pdf, pageData, 0, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height);
}
// 递归的方式对页面进行截取并添加到pdf中
var addPages = function (pdf, pageData, position, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
// 减去已经绘制的区域
canvasHeight -= pageHeight;
position -= a4Height;
// 当还有内容未生成pdf,则新加页面,并添加图片
if (canvasHeight > 0) {
pdf.addPage();
addPages(pdf, pageData, position, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height);
}
}
</script>
上述代码能满足html转pdf,但是转换后的pdf并不能非常好的满足我的其他需求,所以最终放弃这一方案了,但还是记录下来,可能以后会用得到。
下面来说下这个方案的优缺点:
优点:1. js方法转换,在浏览器可以直接将已经生成后的html页面整体转换为pdf
2. 生成的效果与网页预览一致
缺点:1. 分页,因为是html转canvas,所以分页的时候需要特别注意,页面元素设置不合理会导致一行字被分到两页中
2. 图片跨域时,需要后台配置支持跨域才可以生成到pdf中
总之,如果只是简单的生成pdf保存下来,这个方案很不错,但是如果需要分页及打印,则还是由后台生成会比较好(如 office等方案)
下载地址:html2canvas.js jspdf.js
个人博客: IT老五 简书:ThinkinLiu
![9166166-931fd471780b7e64.jpg](https://i-blog.csdnimg.cn/blog_migrate/b288143c073dc4fae7cb7a839f414c4a.jpeg)
IT老五(it-lao5):关注公众号,一起源创,一起学习!