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进行配置，用命令直接调用即可。