在这里插入图片描述
这里将下载好的js文件引用 因为用到地方多所以就使用全局引用下载地址可以参考这个网址这里面有案例参考dome;
在要用到的地方使用

methods: {
			downPdf() {
				window.scrollTo(0,0) //注意这里必须设置为顶部不然会出现图片不全
				let that=this;
				that.$html2canvas(document.body, {
				    onrendered:function(canvas) {
				
				        var contentWidth = canvas.width;
				        var contentHeight = canvas.height;
				
				        //一页pdf显示html页面生成的canvas高度;
				        var pageHeight = contentWidth / 595.28 * 841.89;
				        //未生成pdf的html页面高度
				        var leftHeight = contentHeight;
				        //pdf页面偏移
				        var position = 0;
				        //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
				        var imgWidth = 555.28;
				        var imgHeight = 555.28/contentWidth * contentHeight;
				
				        var pageData = canvas.toDataURL('image/jpeg', 1.0);
				
				        var pdf = new that.$jsPDF('', 'pt', 'a4');
				        //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
				        //当内容未超过pdf一页显示的范围,无需分页
				        if (leftHeight < pageHeight) {
				            pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
				        } else {
				            while(leftHeight > 0) {
				                pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
				                leftHeight -= pageHeight;
				                position -= 841.89;
				                //避免添加空白页
				                if(leftHeight > 0) {
				                    pdf.addPage();
				                }
				            }
				        }
				
				        pdf.save(that.title + '.pdf');
				    }
				})
			}
		}

注意body中的div 不要设置height:100%不然会出现图片不全

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐