jsPDF + html2canvas 分页问题

2017-08-24 09:38:39 1.8k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

matplotlib三维画图之观察博弈论混合策略下纳什均衡点参考链接: 博弈论入门20讲之第16讲-猜谜游戏-散户如何赢庄家游戏背景: 我的期望是: 你的期望是: 使用Python的matplotlib画图: import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D fig = plt.figure() ax = Axes3D(fig) X = np.linspace(0, 1, 100) Y = np.linspace(0, 1, 阅读详情

如图直接贴出代码：

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

...全文

Appstore开发者必读：3.2(f)违规预警与高效申诉指南本文为AppStore开发者提供了应对3.2(f)违规通知的完整指南。文章深度解析了3.2(f)条款下的隐瞒性、关联性与真实性违规类型，并提供了黄金48小时内的自查、申诉信撰写与提交全流程策略。同时，文章强调遵循App Review Guidelines，建立内部合规清单与保持账号独立，是预防违规、维护开发者账号安全的关键。阅读详情

qq_39924172

Web 开发 81,108 成员 341,721 内容

+ 关注 + 加入社区

切换为时间正序

红作坊 2018-04-13

打赏
举报

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

qq_39924172 2017-09-09

打赏
举报

引用 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);

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

qq_39924172 2017-09-09

打赏
举报

以下是我在项目中应用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这位外国大神解决清晰度的问题非常好，以后路过的看客可以去看一看。我的语言组织能力不好，权当学习一下了

心随念 2017-08-24

打赏
举报

没说完，在补上，或者你也可以这样因为你需要的数据只是一个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);

心随念 2017-08-24

打赏
举报

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);

jsPDF + html2canvas 分页问题

相关推荐