实现pdf打印功能

 方法一:将页面保存为图片,再将图片存为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,放大会模糊。

发布了107 篇原创文章 · 获赞 33 · 访问量 20万+

猜你喜欢

转载自blog.csdn.net/qq_36069339/article/details/91385843
今日推荐