方法一:将页面保存为图片,再将图片存为PDF。
1、具体步骤讲解:https://www.cnblogs.com/xuzhengzong/p/8929665.html
2、代码片段
printing:function(){
//第3个参数为尺寸,避免分页时将网页切割。
var pdf = new jsPDF('p','pt',[1105, 2498]);
// 设置打印比例 越大打印越小
pdf.internal.scaleFactor = 1;
var options = {
pagesplit: true, //设置是否自动分页
"background": '#121317' //如果导出的pdf为黑色背景,需要将导出的html模块内容背景 设置成白色。
};
var printHtml = $('#analysis').get(0); // 页面某一个div里面的内容,通过id获取div内容
pdf.addHTML(printHtml,15, 15, options,function() {
var codeStr=_this.code.replace(/ /g,"");//console.info(codeStr);
pdf.save(codeStr+'_Analysis.pdf');
});
},
方法二:html2canvas + jsPDF
将页面body中的元素渲染成canvas图片,然后生成PDF。
1、具体步骤讲解:https://github.com/linwalker/render-html-to-pdf
2、代码片段
printing:function(){
//1、找到需要打印的区域
var analysisHtml=$("#analysis");
html2canvas(analysisHtml, {
onrendered:function(canvas) {
//2、将需要打印区域的DOM渲染成canvas,插入到当前页面底部。
analysisHtml.append(canvas);//document.body.appendChild(canvas)
//返回图片dataURL,参数:图片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//方向默认竖直,尺寸ponits,格式a4[595.28,841.89]
var pdf = new jsPDF('', 'pt', [1105, 2498]);
//addImage后两个参数控制添加图片的尺寸,此处将页面高度按照a4纸宽高比列进行压缩
pdf.addImage(pageData, 'JPEG', 0, 0, 1105, 1105/canvas.width * canvas.height );
pdf.save('Analysis.pdf');
}
})
}
* 这两种方法最后生成的pdf都不是真正意义的PDF,放大会模糊。