js实现html转为pdf下载

dom-to-image

            let _this=this;
            let node=document.getElementById('pdfWrap');
            domtoimage.toJpeg(node,{quality:1.0,bgcolor:'#fff',style:{'opacity':'1','top':'0','left':'0'}})
                .then(function(dataUrl){
                    let img=new Image();
                    img.src=dataUrl;
                    console.log("223");
                    img.onload=function(){
                        console.log(img.height);
                        
                        let contentWidth = img.width;
                        let contentHeight = img.height;

                        let pageHeight = contentWidth / 592.28 * 841.89;
                        let leftHeight = contentHeight;

                         //页面偏移
                        let position = 0;

                        let imgWidth = 595.28;
                        let imgHeight = 592.28 / contentWidth * contentHeight;
                        
                        let pdf = new JsPDF('', 'pt', 'a4');
                        // pdf.addImage(dataUrl,'JPEG',0,0,imgWidth,imgHeight);

                        if(leftHeight < pageHeight){
                            pdf.addImage(dataUrl, 'JPEG', 0, 0, imgWidth, imgHeight);
                        }
                        else{
                            while (leftHeight > 0) {
                                // console.log(pageData);
                                // console.log(leftHeight);
                                pdf.addImage(dataUrl, 'JPEG', 0, position, imgWidth, imgHeight);
                                leftHeight -= pageHeight;
                                position -= 841.89;
                                //避免添加空白页
                                if (leftHeight > 0){
                                   pdf.addPage()
                                }
                            }
                        }

                        pdf.save(_this.pdfData.title + '.pdf')
                    }
                })  

htmlcanvas5和pdf.js

        let _this=this;
    html2Canvas(document.getElementById('pdfWrap'),{
        onrendered(canvas){
            // console.log(canvas);
            let contentWidth = canvas.width;
            let contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度
            let pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            let leftHeight = contentHeight;
            //页面偏移
            let position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            let imgWidth = 595.28;
            let imgHeight = 592.28 / contentWidth * contentHeight;
            let pageData = canvas.toDataURL('image/jpeg', 0.1);
            let PDF = new JsPDF('', 'pt', 'a4');
            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度（841.89）
            //当内容未超过pdf页面显示的范围，无需分页
            if(leftHeight < pageHeight){
                PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            }
            else{
                while (leftHeight > 0) {
                    // console.log(pageData);
                    // console.log(leftHeight);
                    PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if (leftHeight > 0){
                       PDF.addPage()
                    }
                }
            }
            PDF.save(_this.pdfData.title + '.pdf');
        }
    })
    html2Canvas()·