html转pdf

1.html2canvas和jdPdf.debug.js

<script type="text/javascript">
		
		/*html2canvas生成图片,jspdf生成PDF文件*/
		html2canvas($("#pdf"), {
			background: "#fff",
			allowTaint: true,
			taintTest: false,
			onrendered:function(canvas) {
				var contentWidth = canvas.width;
				var contentHeight = canvas.height;
				var pageHeight = contentWidth / 592.28 * 841.89;
				var leftHeight = contentHeight;
				var position = 0;
				var imgWidth = 595.28;
				var imgHeight = 592.28/contentWidth * contentHeight;
				var pageData = canvas.toDataURL('image/jpeg', 1.0);
				var img = new Image();
				img.src = pageData;
				var pdf = new jsPDF('p', 'pt', 'a4');
				img.onload = function() {
					if (leftHeight < pageHeight) {
						pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
					} else {
						while(leftHeight > 0) {
							pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
							leftHeight -= pageHeight;
							position -= 841.89;
							if(leftHeight > 0) {
								pdf.addPage();
							}
						}
					}
					//pdf.save('report_pdf_' + new Date().getTime() + '.pdf');					
				}
			},
		})
</script> 

原理是利用canvas将html截图成图片,放到PDF中,然后通过jsPdf.debug.js进行写出

缺点:对界面控制不友好,如果想要对转之前的html进行更改,让某些控件不显示,需要在js中控制隐藏显示等大量操作!导出的数据量如果稍微大点,图片清晰度调成最高1,则会报一些图片错误,降成0.9即可解决问题,但是还是有着导出时间很长的缺点,如果客户机性能低,会造成页面卡死,无响应等问题。导出的pdf质量效果不佳,对分页不友好,即使加上一些根据空白行进行分页,对于界面比较靓的,还是会出现分页一条字体被截开现象

优点:使用简单,无需跟后台进行交互,对于需要对页面中的部分div进行导出pdf或者图片,是个很不错的选择

2.itext7

因需要写大量后台代码,而且对html要求严格,html需要符合W3C标准,标签都必须闭合等限制,就没进行研究,决定换技术

1、如果页面中有中文,服务器端需要下载字体库simsun.ttc,在后台进行引用,同时在页面的样式中加入对应字体的定义,如:body{font-family: SimSun;},否则中文无法渲染(中文处渲染出来的效果是空白); 
2、页面中如果有图片,如果图片引用是绝对路径或者base64则不用考虑,如果是相对路径,需要在后台用renderer.getSharedContext().setBaseURL("图片绝对路径目录");来指定图片路径,否则图片无法渲染。 
3、要转化的页面必须是标准的XHTML页面,有一处不符合规范就会报错,小编再试的时候就经常报诸如org.xml.sax.SAXParseException;lineNumber: 24; columnNumber: 6;元素类型 "span" 必须由匹配的结束标记 "</span> 终止"之类的错误,所以如果要用iText来大量爬取网络中的页面的话,还是放弃吧,毕竟网上很多页面都是不标准的~

3.wkhtmltopdf

html转换pdf很简单,是一个可执行文件,windows环境可以直接安装,用cmd可以直接执行命令进行转换,Linux下使用方法及一样,不用考虑如itext7对html的过多要求,生成的pdf样式美观,还可以对网站进行在线转换pdf。

cmd:(wkhtmltopdf http://www.baidu.com C:/test/a.pdf)

bin

因找不到Linux 32位环境的gz包,就没有使用,后来发现了更好的一个技术。

4.phantomjs

同wkhtmltopdf一样,都是使用命令行进行转换,wkhtmltopdf能做的事,phantomjs都能做到,而且phantomjs不仅仅是做html转pdf的

bin

example

优点:phantomjs可以自定义脚本文件,内置了也非常多的脚本,可以做很多的事

           phantomjs不需要过多的依赖,只需要一个phantomjs和一个脚本就可以进行工作,无需安装,解压即用,而且phantomjs大小17M,wkhtmltopdf大小除去转image的27M,转pdf速度很快,用canvas一分钟可以完成的,phantomjs只需几秒。

           ----------------------------------------------------------------------------------------------------------------------------------------------------------------

因自带的rasterize.js转pdf会有些问题,比如导出的pdf不带分页而且最后会出现大量空白页,数据量大时,可能后面会出现长长的蓝条,所以这个在我这是被废弃掉了,经过在网上大量查阅文档,找到了一个自定义的脚本,经过自己改造之后,可以完美解决这些问题:

var page = require('webpage').create(),
system = require('system'),
address, output, size;
page.viewportSize = {
  width: 2400,
  height: 20000
};
page.paperSize = { 
format: 'A4', //A4 纸张
orientation: 'portrait', 
margin: '0.8cm' 
};
page.zoomFactor = 1;//放大比例
page.settings.loadImages = true;
page.settings.userAgent = 'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Safari/537.36';
address = system.args[1];
output = system.args[2];
console.log(address);
console.log(output);
page.open(address,function(status){
	if(status=='success'){
		  var cookies = page.cookies;
		  console.log('Listing cookies:');
		  for(var i in cookies) {
			console.log(cookies[i].name + '=' + cookies[i].value);
		  }
	
		window.setTimeout(function (){ 
			page.render(output);
			phantom.exit();  
		}, 5000); 
		console.log('success');
	}else{
		console.log('faild');
	}
 
})

因phantomjs使用时会出现一些问题,所以我将一些常见问题贴在下面:

1.使用时出现:unload this address /failed

解决方案:在需要转pdf的html路径最前面加上file:///,如(file:///C:\export\export.html)

2.在windows上面使用可以直接调用phantomjs.exe

   在Linux上面,需要解压phantomjs文件,不能在java命令中直接调用phantomjs所在的路径,否则会报no such dectory or file,解决方案就是配置环境变量或者调用sh脚本,脚本需要做的事就是:获取到Java传来的phantomjs所在的安装路径,切换到phantomjs的位置,执行一条java传过来的命令执行即可,如命令是(phantomjs C:\work\SMC\webRoot\export\phantomjs2.1.1\example\myhtmltopdf.js file:///C:\work\SMC\webRoot\temp\export\export.html C:\work\SMC\webRoot\temp\export\export.pdf)

如果允许在linux上配置环境变量,可以直接将phantomjs进行配置,用命令直接调用即可。

展开阅读全文

没有更多推荐了,返回首页