h5页面转pdf

 其中需要三个js文件

链接：h5转pdf所需js文件-Javascript文档类资源-CSDN下载

文件资源我设置的是0积分 要是被动态调分可跟我说  我都分享完了 懒得改成否了

重要部分代码 触发downPdf事件即可

注意:大概17行清晰度处1.0为最高 要想更清晰可以在设置h5页面的宽和高的时候等比例设置大一些，在转pdf的时候把pdf的宽高设为正常，相当于放大后转换的时候又缩小，变相提高清晰度（之前我就把网页图片放的可大，但因为太大了 所以转pdf浏览器卡死了  所以要因时而异）

downPdf() {
				let t = this
				html2canvas(document.body, {
					background: "#FFFFFF", //如果指定的div没有设置背景色会默认成黑色,这里是个坑
					onrendered: function(canvas) {
						//未生成pdf的html页面高度
						var leftHeight = canvas.height;
		
						var a4Width = 841.89
						var a4Height = canvas.height
						//一页pdf显示html页面生成的canvas高度;
						var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);
		
						//pdf页面偏移
						var position = 0;
		
						var pageData = canvas.toDataURL('image/png', 1); //清晰的1.0为最高
		
						// var pdf = new jsPDF('landscape', 'pt', 'a4');
						let pdf = new jsPDF('p', 'pt', [a4Width, a4Height]);
						var index = 1,
							canvas1 = document.createElement('canvas'),
							height;
						pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
						
				  function createImpl(canvas) {
						if (leftHeight > 0) {
							index++;
		
							var checkCount = 0;
							if (leftHeight > a4HeightRef) {
								var i = position + a4HeightRef;
								for (i = position + a4HeightRef; i >= position; i--) {
									var isWrite = true
									for (var j = 0; j < canvas.width; j++) {
										var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
		
										if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
											isWrite = false
											break
										}
									}
									if (isWrite) {
										checkCount++
										if (checkCount >= 10) {
											break
										}
									} else {
										checkCount = 0
									}
								}
								height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
								if(height<=0){
									height = a4HeightRef;
								}
							} else {
								height = leftHeight;
							}
		
							canvas1.width = canvas.width;
							canvas1.height = height;
		
							// console.log(index, 'height:', height, 'pos', position);
		
							var ctx = canvas1.getContext('2d');
							ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);
		
							var pageHeight = Math.round(a4Width / canvas.width * height);
						   // pdf.setPageSize(null, pageHeight)
							if(position != 0){
								pdf.addPage();
							}
							pdf.addImage(canvas1.toDataURL('image/png', 1.0), 'PNG', 0, 0, a4Width, a4Width / canvas1.width * height);  
							leftHeight -= height;
							position += height;
							// $('.pdfProgress').text(index + 1);
							// $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
							if (leftHeight > 0) {
								setTimeout(createImpl, 595.28, canvas);
							} else {
								pdf.save('newyear.pdf');
								// $('.pdfTip').remove();
							}
						}
					}
		
					//当内容未超过pdf一页显示的范围，无需分页
					if (leftHeight < a4HeightRef) {
						pdf.addImage(pageData, 'PNG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);
						pdf.save('newyear.pdf')//存储时的名字
					} else {
						try {
							pdf.deletePage(0);
							// $('.pdfTip').show();
							// $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
							setTimeout(createImpl, 595.28, canvas);
						} catch (err) {
							console.log(err);
						}
					}
				}
			})
			console.log('生成中。。。')
			}
		}

 页面代码

<script>
	import jsPDF from '@/basejs/jspdf.js'; //导出pdf
	import html2canvas from '@/basejs/html2canvas.js'; //导出pdf
	
	import canvas from '@/basejs/canvas';
	export default {
		data() {
			return {
			}
		},
		onLoad(e) {
			
			
		},
		methods: {
			downPdf() {
				let t = this
				console.log('生成中。。。')
				html2canvas(document.body, {
					background: "#FFFFFF", //如果指定的div没有设置背景色会默认成黑色,这里是个坑
					onrendered: function(canvas) {
						//未生成pdf的html页面高度
						var leftHeight = canvas.height;
		
						var a4Width = 841.89
						var a4Height = canvas.height
						//一页pdf显示html页面生成的canvas高度;
						var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);
		
						//pdf页面偏移
						var position = 0;
		
						var pageData = canvas.toDataURL('image/png', 1);
		
						// var pdf = new jsPDF('landscape', 'pt', 'a4');
						let pdf = new jsPDF('p', 'pt', [a4Width, a4Height]);
						var index = 1,
							canvas1 = document.createElement('canvas'),
							height;
						pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
						
				  function createImpl(canvas) {
						if (leftHeight > 0) {
							index++;
		
							var checkCount = 0;
							if (leftHeight > a4HeightRef) {
								var i = position + a4HeightRef;
								for (i = position + a4HeightRef; i >= position; i--) {
									var isWrite = true
									for (var j = 0; j < canvas.width; j++) {
										var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
		
										if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
											isWrite = false
											break
										}
									}
									if (isWrite) {
										checkCount++
										if (checkCount >= 10) {
											break
										}
									} else {
										checkCount = 0
									}
								}
								height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
								if(height<=0){
									height = a4HeightRef;
								}
							} else {
								height = leftHeight;
							}
		
							canvas1.width = canvas.width;
							canvas1.height = height;
		
							// console.log(index, 'height:', height, 'pos', position);
		
							var ctx = canvas1.getContext('2d');
							ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);
		
							var pageHeight = Math.round(a4Width / canvas.width * height);
						   // pdf.setPageSize(null, pageHeight)
							if(position != 0){
								pdf.addPage();
							}
							pdf.addImage(canvas1.toDataURL('image/png', 1.0), 'PNG', 0, 0, a4Width, a4Width / canvas1.width * height);
							leftHeight -= height;
							position += height;
							// $('.pdfProgress').text(index + 1);
							// $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
							if (leftHeight > 0) {
								setTimeout(createImpl, 595.28, canvas);
							} else {
								pdf.save('newyear.pdf');
								// $('.pdfTip').remove();
							}
						}
					}
		
					//当内容未超过pdf一页显示的范围，无需分页
					if (leftHeight < a4HeightRef) {
						pdf.addImage(pageData, 'PNG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);
						pdf.save('newyear.pdf')
					} else {
						try {
							pdf.deletePage(0);
							// $('.pdfTip').show();
							// $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
							setTimeout(createImpl, 595.28, canvas);
						} catch (err) {
							console.log(err);
						}
					}
				}
			})
			console.log('生成中。。。')
			}
		}
	}
</script>

<style>
	@import url("./xq.css");
</style>