使用wkhtmltopdf实现HTML转PDF

wkhtmltopdf注意事项

1.webkit内核的，所以建议使用之前用谷歌浏览器开发好网页

2.目前这个插件不再更新，所以内核老旧，只支持ES5的代码，所以ES6及以上的代码统统不支持，还有字符串拼接的 `` 符号也不能使用，只能使用单双引号。如果使用了，转出的pdf就是一块白板。（不支持的方法，filter，forEach  ,for ... of  ,map,includes 等等）

3.同样css3以上的也不能用，比如display：flex  ；transition 等等，这个不会白板，但是样式会乱，建议用老版本css重新写

4.如果是内容数量不确定的情况下，还要保证不被pdf隔断图形或者照片（如下），这时候要做到溢出检测换行。这个我没想当办法，只能说是将已有的组件固定高度，然后通过循环迭代去渲染。并且初步计算，不算准确，大家可以确定更准确的值讨论一下，一页PDF = HTML 2050px,所以按照这个计算一页即可

	for(var i=0;i<reportData.sort.length;i++){
			var classItem = reportData[reportData.sort[i]];
	
			if(i==0){
				h=checkHeight(h,topH);
			}
			h=checkHeight(h,bigTitle,"title",reportData.sort[i]);
			for(var j=0;j<classItem.length;j++){
				if(classItem[j].name!="charts"){
					if(isArray(classItem[j])){
							h=checkHeight(h,titleGap);
							h=checkHeight(h,classItem[j].length * sTitle,'gapRows',classItem[j]);
					}else{
						h=checkHeight(h,sTitle,'row',classItem[j]);
					}
				}else{
					for(var k=0;k<classItem[j]['value'].length;k++){
						h=checkHeight(h,chartHight,'chart',classItem[j]['value'][k]);
					}
				}
				
			}
		}
		checkHeight(h,9999);
  }

	function checkHeight(h,addH,type,obj){//检测高度
		h+=addH;
		if(h>maxHeight){//下一页
			h=0;
			h+=addH;
			pdfData.push(page);
			page=[];
		}
		if(obj){
			page.push({type:type,value:obj})
		}
		return h;
	}	

以上是我的，业务代码，主要就是，分开一个一个模块进行计算，重新排列数据，在渲染的时候按照这个数据渲染，渲染代码采用HTML拼接等方式。具体不展示了。