jsPDF + html2canvas 分页问题

[qq_39924172]

如图直接贴出代码：



我想把一个div数组循环遍历分别怼到不同的jsPDF页上，但是最后出来的PDF全部是空白页。我用文字试了一下，文字是能正确在不同的页面上显示的，
烦请懂的大神指点一下

[心随念]

html2canvas 是异步的，可能你的 html2canvas 方法还没有执行完，就执行了pdf.save(); 所以可能是空白的。可以这样试试。

var elementLength = $(".lableClass").length;
	lableDivLength = 0;
	
	//m在你的 onrendered 方法中，每次lableDivLength+1
	onrendered:function(canvas){
		// 你的代码 ...
		pdf.addImage(xxx );
		lableDivLength ++;
	}
	
	
	//最后save 
	var myInterval =setInterval(function(){
		if(lableDivLength == elementLength){
			clearInterval(myInterval);
			pdf.save(xxx);
		}
		
	},1000);

[心随念]

没说完，在补上，或者你也可以这样 因为你需要的数据只是 一个base64 的编码。所以可以这样先获取 base64的编码，封装成一个json对象，最后在save。

$(".labelClass").each(function(index){
		var loadCanvas = $(this).find("canvas")[0];
		context = loadCanvas.getContext("2d"),
		width = $(this).width();
		height = $(this).height();
		base64Str = loadCanvas.toDataURL("image/png");
		imgDataJson += "{\"name\" : \""+index+"\",\"value\": \""+base64Str+"\"," +
							"\"width\": \""+width+"\",\"height\": \""+height+"\" },";
		
	});
	imgDataJson = imgDataJson.substring(0,imgDataJson.length-1);
	imgDataJson = "["+imgDataJson+"]";
	
	for(var i=0; i<imgDataJson.length; i++){
		// 若需要换页，你就 pdf.addPage();
		pdf.addImage(imgDataJson[i].base64Str,'png',0,0,359,359);
		
	}
	
	//最后 
	pdf.save(xxx);

[qq_39924172]

以下是我在项目中应用jsPDF + html2canvas的一点小小心得。 直接代码：

var actualWidth = ${printCondition.actualWidth};
		var actualHeight = ${printCondition.actualHeight};
		var pdf = new jsPDF('', 'mm', [actualWidth,actualHeight]);
		var lableDiv = document.getElementsByClassName("labelClass");
		A(pdf,0,lableDiv);
		function A(pdf,i,lableDiv){
			html2canvas(lableDiv[i], {
		        onrendered:function(canvas) {
		        	//返回图片dataURL，参数：图片格式和清晰度(0-1)
		            var pageData = canvas.toDataURL('image/jpeg', 1.0);
		            //addImage后两个参数控制添加图片的尺寸
		            pdf.addImage(pageData, 'JPEG', 0, 0, 0, 0);
		            if(i == lableDiv.length - 1){
		            	pdf.save(formatTime(new Date())+'.pdf');
		            	setTimeout(function(){window.close()},10);
		            }
		            if(i < lableDiv.length){
		    			pdf.addPage();
		    		}
		            i++;
		            if(i < lableDiv.length){
		            	A(pdf,i,lableDiv);
		            }
		        }
		    });
		}

这个项目是关于物流的，所以需要提供PDF打印面单。 如代码所示，html2canvas 是异步的所以应用递归来保证要打印的内容顺序。此外这个也是分页的一个小例子。 但是问题是下载下来的PDF不清晰，后面根据https://github.com/niklasvh/html2canvas/pull/1087这个外国大神的代码解决了清晰度问题。但是用html2canvas +jsPDF做出来条形码扫不出来，还有一个就是这个技术实现的效果和电脑屏幕的分辨率有很大的关系。所以最后放弃了使用这个技术做PDF。 最后我要强调的一点是我觉得https://github.com/niklasvh/html2canvas/pull/1087这位外国大神解决清晰度的问题非常好，以后路过的看客可以去看一看。 我的语言组织能力不好，权当学习一下了

[qq_39924172]

引用 1 楼 u012445835 的回复:

html2canvas 是异步的，可能你的 html2canvas 方法还没有执行完，就执行了pdf.save(); 所以可能是空白的。可以这样试试。

var elementLength = $(".lableClass").length;
	lableDivLength = 0;
	
	//m在你的 onrendered 方法中，每次lableDivLength+1
	onrendered:function(canvas){
		// 你的代码 ...
		pdf.addImage(xxx );
		lableDivLength ++;
	}
	
	
	//最后save 
	var myInterval =setInterval(function(){
		if(lableDivLength == elementLength){
			clearInterval(myInterval);
			pdf.save(xxx);
		}
		
	},1000);

首先十分感谢你认真的回答，再一个就是道个歉到现在才回复你。 项目刚刚上完线，现在才有空回复。 根据你给的建议，确实发现了问题所在。

[红作坊]

pdf 智能分页，看这里：https://blog.csdn.net/maiyiwang/article/details/79912231