js实现将网页下载为pdf

前端有时会有实现将局部网页转成pdf并且下载到本地的需求，以下实现过程仅限简单的操作：

1、引入jspdf相关的插件

2、在html中给要转成pdf的部分添加id（本例的id是pdf-wrapper）

        
顶部标题（不会被放入pdf中）
        

            
公告
            

                全体公司成员：现定明天于会议室开会，请全部人员务必准时到场。请自己携带身份证、草稿纸、笔、笔记本、自带桌椅、耳机、手机、厚衣服、厚袜子、请各位互相通知、达到互助共赢的局面
            
            

                全体公司成员：现定明天于会议室开会，请全部人员务必准时到场
            
            

                自带桌椅、耳机、手机、厚衣服、厚袜子、请各位互相通知、达到互助共赢的局面
            
        

        下载pdf
    

3、添加下载方法：

function jsPdfDownload(){
            let pdfName = "测试";
            let id = "pdf-wrapper";
            var target = document.getElementById(id);
            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 = 555.28;//595.28//左右边距20
                    var imgHeight = 552.28/contentWidth * contentHeight;//左右边距20

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

                    var pdf = new jsPDF('', 'pt', 'a4');

                    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                    //当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );//左右边距20
                    } else {
                        while(leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)//左右边距20
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白页
                            if(leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    pdf.save(pdfName+".pdf");
                }
            })
        }

4、网页效果：

网页效果

 

5、pdf效果：

生成的pdf

6、源代码：

    
    
    
    
    
    
    


    

        
顶部标题（不会被放入pdf中）
        

            
公告
            

                全体公司成员：现定明天于会议室开会，请全部人员务必准时到场。请自己携带身份证、草稿纸、笔、笔记本、自带桌椅、耳机、手机、厚衣服、厚袜子、请各位互相通知、达到互助共赢的局面
            
            

                全体公司成员：现定明天于会议室开会，请全部人员务必准时到场
            
            

                自带桌椅、耳机、手机、厚衣服、厚袜子、请各位互相通知、达到互助共赢的局面
            
            
        

        下载pdf