本篇教程介绍了HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

1、目的：在前段是 jQuery库 或者 VUE库 或者两者混合库，将html 页面和数据 转换成PDF格式并下载，支持分页

2、引入类库包：

3、需要下载页面内容，假设在一个DIV里面(vue2.0示例)：

function makeMpdf () {

if(confirm("您确认下载该PDF文件吗?")){

var pdf = new jsPDF(‘p‘,‘pt‘,‘a4‘);

// 设置打印比例 越大打印越小

pdf.internal.scaleFactor = 2;

var options = {

pagesplit: true, //设置是否自动分页

"background": ‘#FFFFFF‘   //如果导出的pdf为黑色背景，需要将导出的html模块内容背景 设置成白色。

};

var printHtml = $(‘#pdfDom‘).get(0);   // 页面某一个div里面的内容，通过id获取div内容

pdf.addHTML(printHtml,15, 15, options,function() {

pdf.save(‘目标.pdf‘);

});

}

}

4、或者上面的JS方法可以替换成这个也是可以的。

//将html页面导出.pdf格式文件(适用于jQuery、vue库)  -- xzz 2018/04/24

function makeMpdf(pdfName) {

if(confirm("您确认下载该PDF文件吗?")){

var target = document.getElementsByClassName("right-aside")[0];

target.style.background = "#FFFFFF";

if(pdfName==‘‘||pdfName==undefined) pdfName= getNowFormatDate();

html2canvas(target, {

onrendered: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;

var pageData = canvas.toDataURL(‘image/jpeg‘, 1.0);

var pdf = new jsPDF(‘‘, ‘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知识！