本篇教程介绍了HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
<
1、目的：在前段是jQuery库或者VUE库或者两者混合库，将html页面和数据转换成PDF格式并下载，支持分页
2、引入类库包：
3、需要下载页面内容，假设在一个DIV里面(vue2.0示例)：
@yield(‘search‘)
@yield(‘content‘)
导出PDF文件
functionmakeMpdf(){
if(confirm("您确认下载该PDF文件吗?")){
varpdf=newjsPDF(‘p‘,‘pt‘,‘a4‘);
//设置打印比例越大打印越小
pdf.internal.scaleFactor=2;
varoptions={
pagesplit:true,//设置是否自动分页
"background":‘#FFFFFF‘//如果导出的pdf为黑色背景，需要将导出的html模块内容背景设置成白色。
};
varprintHtml=$(‘#pdfDom‘).get(0);//页面某一个div里面的内容，通过id获取div内容
pdf.addHTML(printHtml,15,15,options,function(){
pdf.save(‘目标.pdf‘);
});
}
}
4、或者上面的JS方法可以替换成这个也是可以的。
//将html页面导出.pdf格式文件(适用于jQuery、vue库)--xzz/04/24
functionmakeMpdf(pdfName){
if(confirm("您确认下载该PDF文件吗?")){
vartarget=document.getElementsByClassName("right-aside")[0];
target.style.background="#FFFFFF";
if(pdfName==‘‘||pdfName==undefined)pdfName=getNowFormatDate();
html2canvas(target,{
onrendered:function(canvas){
varcontentWidth=canvas.width;
varcontentHeight=canvas.height;
//一页pdf显示html页面生成的canvas高度;
varpageHeight=contentWidth/592.28*841.89;
//未生成pdf的html页面高度
varleftHeight=contentHeight;
//页面偏移
varposition=0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
varimgWidth=595.28;
varimgHeight=592.28/contentWidth*contentHeight;
varpageData=canvas.toDataURL(‘image/jpeg‘,1.0);
varpdf=newjsPDF(‘‘,‘pt‘,‘a4‘);
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if(leftHeight
pdf.addImage(pageData,‘JPEG‘,0,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(pdfName+".pdf");
}
})
}
}
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
