~huangqianlong/OlyMEBG.git

			@@ -22,8 +22,8 @@
			/* 20220221 PI改造 by 徐亮 start */
			body{margin: 0 auto;
			width: 780px;}
			#title1{height: 30px;}
			#title2{height: 110px;}
			.title1{height: 30px;}
			.title2{height: 110px;}
			/* 20220221 PI改造 by 徐亮 end */


			@@ -42,7 +42,8 @@

			<body style="font-family: MS Gothic;">
			<div id="pdf-wrapper">
			<div id="title1"></div>
			<div class="pdf-page">

			<table width="100%" border="0">
			<tr>
			<td width="25%">
			@@ -398,9 +399,11 @@
			</tr>
			</table>

			<div style="page-break-after: always;"></div>

			<div id="title2"></div>
			</div>
			<div style="page-break-after: always;"></div>
			<div class="pdf-page">

			<table width="100%" border="0">
			<tr>
			<td width="25%">
			@@ -453,34 +456,36 @@
			<br/>
			<table width="100%" border="1" cellspacing="2" style="font-size: 8pt;">
			<tr>
			<td>
			<table width="100%" border="1" cellspacing="0">
			<tr><td style="height:300px; text-align: center;"><apex:image value="{!qr.Photo_1_Text__c}" width="80%" rendered="{!NOT(ISBLANK(qr.Photo_1_Text__c))}" /></td></tr>
			<td style="width:50%">
			<table width="100%" border="0" cellspacing="0">
			<tr><td style="height:300px; text-align: center;"><apex:image id="Photo_1_Text" value="{!Photo_1_Text}" width="80%" rendered="{!NOT(ISBLANK(qr.Photo_1_Text__c))}" /></td></tr>
			<tr><td style="height:40px;"></td></tr>
			</table>
			</td>
			<td style="border-left-color: white;">
			<table width="100%" border="1" cellspacing="0">
			<tr><td style="height:300px; text-align: center;"><apex:image value="{!qr.Photo_2_Text__c}" width="80%" rendered="{!NOT(ISBLANK(qr.Photo_2_Text__c))}" /></td></tr>
			<table width="100%" border="0" cellspacing="0">
			<tr><td style="height:300px; text-align: center;"><apex:image value="{!Photo_2_Text}" width="80%" rendered="{!NOT(ISBLANK(qr.Photo_2_Text__c))}" /></td></tr>
			<tr><td style="height:40px;"></td></tr>
			</table>
			</td>
			</tr>
			<tr>
			<td style="border-top-color: white;">
			<table width="100%" border="1" cellspacing="0">
			<tr><td style="height:300px; text-align: center;"><apex:image value="{!qr.Photo_3_Text__c}" width="80%" rendered="{!NOT(ISBLANK(qr.Photo_3_Text__c))}" /></td></tr>
			<table width="100%" border="0" cellspacing="0">
			<tr><td style="height:300px; text-align: center;"><apex:image value="{!Photo_3_Text}" width="80%" rendered="{!NOT(ISBLANK(qr.Photo_3_Text__c))}" /></td></tr>
			<tr><td style="height:40px;"></td></tr>
			</table>
			</td>
			<td style="border-left-color: white; border-top-color: white;">
			<table width="100%" border="1" cellspacing="0">
			<tr><td style="height:300px; text-align: center;"><apex:image value="{!qr.Photo_4_Text__c}" width="80%" rendered="{!NOT(ISBLANK(qr.Photo_4_Text__c))}" /></td></tr>
			<table width="100%" border="0" cellspacing="0">
			<tr><td style="height:300px; text-align: center;"><apex:image value="{!Photo_4_Text}" width="80%" rendered="{!NOT(ISBLANK(qr.Photo_4_Text__c))}" /></td></tr>
			<tr><td style="height:40px;"></td></tr>
			</table>
			</td>
			</tr>
			</table>
			</div>

			</div>
			</body>

			@@ -512,51 +517,109 @@

			let id = "pdf-wrapper";
			var target = document.getElementById(id);
			// 把imageDta转换成url
			// page_height：一页的高度
			function ImageDataToUrl(img_data,page_height){
			let cvs = document.createElement("CANVAS");
			cvs.width = img_data.width;
			cvs.height = page_height;
			var ctx= cvs.getContext("2d");
			ctx.fillStyle="white";
			ctx.fillRect(0,0,cvs.width,cvs.height);// 填充canvas所有区域为白色
			ctx.putImageData(img_data,0,0);
			return cvs.toDataURL('image/jpeg', 1.0);
			}
			function jsPdfDownload(){
			let pdfName = "测试";
			let id = "pdf-wrapper";
			var target = document.getElementById(id);
			target.style.background = "#FFFFFF";
			if(pdfName==''\|\|pdfName==undefined) pdfName= getNowFormatDate();

			html2canvas(target, {
			let jtargets = jQuery("#pdf-wrapper .pdf-page");
			let j_arr = new Array(jtargets.length + 1).join(0).split('').map(function () { return false });
			let landscape = false;
			let pw = 595.28;
			let ph = 841.89;
			const marginw = 40;
			const marginh = 40;

			let orientation = '';
			if (landscape) {
			pw += ph; ph = pw - ph; pw = pw - ph;
			orientation = 'l';
			}
			var pdf = new jsPDF(orientation, 'pt', 'a4');// 第一个参数填字母l，注意不是数字1，为横向pdf
			jtargets.each(function (i, e) {
			e.style.background = "#FFFFFF";
			})

			let rei = 0;
			let recursion = null;
			recursion = function (i) {
			if (i >= jtargets.length) {
			Fun(pdf);
			return;
			}
			e = jtargets[i];
			html2canvas(e, {
			scale: 2,
			onrendered:function(canvas) {
			/**
			本方法需要做几个事情
			1.需要把canvas的内容分页显示到pdf的页中
			2.canvas的宽高需要和pdf的宽高进行映射
			3.截取到的内容需要放进一页宽高的canvas里面，并对其余区域刷白
			*/
			var ctx = canvas.getContext("2d");
			let canvas_max_page_num = 9;
			let canvas_current_page_num = 0;
			var contentWidth = canvas.width;
			var contentHeight = canvas.height;

			//一页pdf显示html页面生成的canvas高度;
			var pageHeight = contentWidth / 592.28 * 841.89;

			//未生成pdf的html页面高度
			var leftHeight = contentHeight;
			//页面偏移
			var position = 0;

			//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
			var imgWidth = 515.28;//595.28//左右边距20
			var imgHeight = 515.28/contentWidth * contentHeight;//左右边距20
			var outputWidth = pw - 2 * marginw;//595.28//左右边距20
			let rate = outputWidth / 780;//输出宽度和内容宽度的比例
			var outputHeight = ph - 2 * marginh;//左右边距20
			let onePdfPageInCanvasHeight = contentWidth/outputWidth*outputHeight;//一页pdf在canvas中的高度;
			//var pageData = canvas.toDataURL('image/jpeg', 1.0);
			var pageData = null;
			var imgData = null;

			var pageData = canvas.toDataURL('image/jpeg', 1.0);
			var captureHeight = null;// 截取的当前canvas页的高度

			var pdf = new jsPDF('', 'pt', 'a4');
			let j = i;
			while(position < contentHeight){

			//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
			//当内容未超过pdf一页显示的范围，无需分页
			if (leftHeight < pageHeight) {
			pdf.addImage(pageData, 'JPEG', 40, 0, imgWidth, imgHeight );//左右边距20
			} else {
			while(leftHeight > 0) {
			pdf.addImage(pageData, 'JPEG', 40, position, imgWidth, imgHeight)//左右边距20
			leftHeight -= pageHeight;
			position -= 841.89;
			//避免添加空白页
			if(leftHeight > 0) {
			if (j++) {
			pdf.addPage();
			}

			if(position+onePdfPageInCanvasHeight>contentHeight){
			captureHeight = contentHeight-position;
			}else{
			captureHeight = onePdfPageInCanvasHeight;
			}

			imgData = ctx.getImageData(0,position,contentWidth,captureHeight);
			pageData = ImageDataToUrl(imgData,onePdfPageInCanvasHeight);
			pdf.addImage(pageData, 'JPEG', marginw, marginh, outputWidth, outputHeight);//左右边距20,被输出的图片会被拉伸为outputWidth，outputHeight的宽高
			canvas_current_page_num++;
			position += onePdfPageInCanvasHeight;
			if (canvas_max_page_num > 0 && canvas_current_page_num >= canvas_max_page_num) {
			break;
			}
			}
			Fun(pdf);

			recursion(i + 1);
			}
			})
			};
			recursion(rei);



			}

			//blockme();
			@@ -566,11 +629,14 @@
			//unblockUI();
			document.getElementById("Responsible_Person_HP__c").innerHTML = data.object.responsiblePersonHP;
			document.getElementById("Caller_phone__c").innerHTML = data.object.callerPhone;

			if(confirm("PDF已加载完毕，是否显示？")){
			jsPdfDownload();
			}, staticResources.token);

			}
			}, staticResources.token);
			}



			</script>
			<!-- 20220221 PI改造 by 徐亮 end -->
			</html>