<apex:page Controller="QuotePDFController" showHeader="false" sidebar="false" id="allPage" action="{!init}" >
|
<!-- <apex:page Controller="QuotePDFController" showHeader="false" sidebar="false" id="allPage" action="{!init}" renderAs="pdf"> -->
|
<head>
|
<style>
|
@page {
|
size: A4;
|
margin: 1mm 1mm 1mm 1mm;
|
}
|
</style>
|
</head>
|
<body style="font-family: Arial Unicode MS; page-break-inside: auto">
|
<div id="pdf-wrapper">
|
<div class="pdf-page">
|
<table border="0" width="100%" style="border-collapse: collapse;">
|
<tr>
|
<td style="text-align:right;">{!quoteInfo.quoteDate}</td>
|
</tr>
|
<tr>
|
<td style="text-align:right;">{!$ObjectType.Quote.label}#{!quoteInfo.quoteNo}</td>
|
</tr>
|
<tr>
|
<td style="text-align:right;">{!$Label.Label_Total_pages}：{!pageCnt}</td>
|
</tr>
|
<tr>
|
<td style="text-align:left;">{!$Label.Label_From}：{!quoteInfo.dealerName}</td>
|
</tr>
|
<tr>
|
<td style="text-align:left;">{!$ObjectType.Contact.label}：<span id="dealerContactName">{!quoteInfo.dealerContactName}</span> {!$ObjectType.Contact.fields.MobilePhone.label}：<span>{!quoteInfo.dealerContactPhone}</span></td>
|
</tr>
|
<tr>
|
<td style="text-align:left;">{!$ObjectType.Account.fields.Address1__c.label}：{!quoteInfo.dealerAddress}</td>
|
</tr>
|
<tr>
|
<td style="text-align:left;">{!$ObjectType.Contact.fields.Phone.label}：{!quoteInfo.dealerPhone} {!$ObjectType.Contact.fields.Fax.label}：{!quoteInfo.dealerFax}</td>
|
</tr>
|
<tr>
|
<td style="text-align:left;">{!$ObjectType.Contact.fields.Email.label}：{!quoteInfo.dealerEmail}</td>
|
</tr>
|
<tr>
|
<td style="text-align:left;"> </td>
|
</tr>
|
<tr>
|
<td style="text-align:left;">{!$Label.Label_To}：{!quoteInfo.accountName}</td>
|
</tr>
|
<tr>
|
<td style="text-align:left;" id="accountContactName">{!quoteInfo.accountContactName}</td>
|
</tr>
|
<tr>
|
<td style="text-align:left;">{!$ObjectType.Contact.fields.Phone.label}：<span id="accountContactPhone">{!quoteInfo.accountContactPhone}</span> {!$ObjectType.Contact.fields.Email.label}：<span id="accountContactEmail">{!quoteInfo.accountContactEmail}</span></td>
|
</tr>
|
</table>
|
|
<br/>
|
Quotation Sheet(Quotation #{!quoteInfo.quoteNo})<br/>
|
|
<table border="1" width="100%" style="border-collapse: collapse;table-layout: fixed;">
|
<colgroup>
|
<col width="10%" />
|
<col width="60%" />
|
<col width="10%" />
|
<col width="20%" />
|
</colgroup>
|
<tr style="text-align: center;">
|
<th>{!$Label.Label_Units}</th>
|
<th>{!$Label.Label_Description}</th>
|
<th>{!$ObjectType.QuoteLineItem.fields.Quantity.label}</th>
|
<th>{!$ObjectType.QuoteLineItem.fields.TotalPrice.label}{!currencyIsoCode}</th>
|
</tr>
|
<apex:repeat value="{!printRecords}" var="set">
|
<tr>
|
<td style="text-align: center;"><apex:outputText value="{!set.units}" /></td>
|
<td><apex:outputText value="{!set.description}" /></td>
|
<td style="text-align: right;"><apex:outputText value="{!set.qty}" /></td>
|
<td style="text-align: right;"><apex:outputText value="{!set.total}" /></td>
|
</tr>
|
</apex:repeat>
|
</table>
|
|
<br/>
|
|
Note:<br/>
|
<!-- 1) The payment terms are {!quoteInfo.note1} .<br/>
|
付款方式 {!quoteInfo.note2} 。<br/>
|
2) Quoation valid until {!quoteInfo.note3} .<br/>
|
报价有效期到 {!quoteInfo.note3} 。<br/>
|
3) All the commodoties come with {!quoteInfo.note4} year's manufacturer warranty.<br/>
|
所有商品含 {!quoteInfo.note4} 年厂家保修。<br/>
|
4) The above quotations are {!quoteInfo.note5} prices, Commodoties shipped to the clien's requirements.<br/>
|
上述报价为 {!quoteInfo.note5} 价，商品送至客户指定地点。<br/>
|
5) The above quotations are all {!quoteInfo.note6}.<br/>
|
上述报价均为 {!quoteInfo.note7} 价。<br/>
|
6) Configuration as per attached.<br/>
|
配置清单详见附件。<br/> -->
|
<apex:outputText value="{!quoteInfo.comment}" escape="false"/>
|
<!-- 1) The above quotations are CIP prices, Commodities shipped to the client’s requirements.<br/>
|
2) The above quotations are all tax {!quoteInfo.note2}.<br/>
|
3) The payment terms are {!quoteInfo.note3}.<br/>
|
4) Quotation valid until {!quoteInfo.note4}.<br/>
|
5) All the commodities come with {!quoteInfo.note5} year’s manufacturer warranty.<br/>
|
6) Configuration as per attached.<br/>
|
7) Delivery lead time is {!quoteInfo.note7} days after receipt of payment.<br/> -->
|
|
</div>
|
<apex:outputPanel rendered="{!pageCnt > 1}" layout="none">
|
<div style="page-break-after: always;"/>
|
</apex:outputPanel>
|
|
<apex:variable value="{!1}" var="cnt1" />
|
<apex:repeat value="{!printRecords}" var="set">
|
<!-- <apex:variable value="{!1}" var="cnt2" /> -->
|
<apex:repeat value="{!set.setPage}" var="sp">
|
<div class="pdf-page">
|
<table border="1" width="100%" style="border-collapse: collapse;table-layout: fixed; font-size: 12px;">
|
<colgroup>
|
<col width="3%" />
|
<col width="10%" />
|
<col width="15%" />
|
<col width="{!IF(isPrintPrice=='true', 23, 33)}%" />
|
<col width="{!IF(isPrintPrice=='true', 20, 33)}%" />
|
<col width="5%" />
|
<apex:outputPanel rendered="{!isPrintPrice=='true'}" layout="none">
|
<col width="12%" />
|
<col width="12%" />
|
</apex:outputPanel>
|
</colgroup>
|
<!-- <apex:outputPanel rendered="{!cnt2 == 1}" layout="none"> -->
|
<tr style="text-align: center;">
|
<td colspan="{!IF(isPrintPrice=='true', 8, 6)}">{!set.description}{!$Label.Label_Set_detail}</td>
|
</tr>
|
<!-- </apex:outputPanel> -->
|
<tr style="text-align: center;">
|
<td>{!$Label.Label_No}</td>
|
<td>{!$ObjectType.Product2.fields.ProductCode.label}</td>
|
<td>{!$ObjectType.Product2.fields.Product_ECCode__c.label}</td>
|
<td>{!$ObjectType.Product2.fields.Description.label}</td>
|
<td>{!$ObjectType.QuoteLineItem.fields.Description.label}</td>
|
<td>{!$ObjectType.QuoteLineItem.fields.Quantity.label}</td>
|
<apex:outputPanel rendered="{!isPrintPrice=='true'}" layout="none">
|
<td>{!$ObjectType.QuoteLineItem.fields.UnitPrice.label}{!currencyIsoCode}</td>
|
<td>{!$ObjectType.QuoteLineItem.fields.TotalPrice.label}{!currencyIsoCode}</td>
|
</apex:outputPanel>
|
</tr>
|
<apex:repeat value="{!sp}" var="line">
|
<tr>
|
<td style="text-align: center;"><apex:outputText value="{!line.lineNo}" /></td>
|
<td><apex:outputText escape="false" value="{!line.productCode}" /></td>
|
<td><apex:outputText escape="false" value="{!line.productEC}" /></td>
|
<td><apex:outputText escape="false" value="{!line.description}" /></td>
|
<td><apex:outputText escape="false" value="{!line.comment}" /></td>
|
<td style="text-align: right;"><apex:outputText value="{!line.quantity}" /></td>
|
<apex:outputPanel rendered="{!isPrintPrice=='true'}" layout="none">
|
<td style="text-align: right;"><apex:outputText value="{!line.price}" /></td>
|
<td style="text-align: right;"><apex:outputText value="{!line.totalPrice}" /></td>
|
</apex:outputPanel>
|
</tr>
|
</apex:repeat>
|
</table>
|
</div>
|
|
|
<apex:outputPanel rendered="{!cnt1 < pageCnt - 1}" layout="none">
|
<div style="page-break-after: always;"/>
|
</apex:outputPanel>
|
|
<!-- <apex:variable value="{!cnt2 + 1}" var="cnt2" /> -->
|
<apex:variable value="{!cnt1 + 1}" var="cnt1" />
|
</apex:repeat>
|
</apex:repeat>
|
</div>
|
</body>
|
<style>
|
/* 20220221 PI改造 by 徐亮 start */
|
body{margin: 0 auto;width: 780px;}
|
.title1{height: 30px;}
|
.title2{height: 110px;}
|
/* 20220221 PI改造 by 徐亮 end */
|
</style>
|
<!-- 20220221 PI改造 by 徐亮 start -->
|
<apex:includeScript value="{! URLFOR($Resource.AWSService, 'AWSService.js') }" />
|
<script src="../../soap/ajax/53.0/connection.js" type="text/javascript"></script>
|
<apex:stylesheet value="{!URLFOR($Resource.blockUIcss)}"/>
|
<apex:includeScript value="{!URLFOR($Resource.jquery183minjs)}"/>
|
<apex:includeScript value="{!URLFOR($Resource.PleaseWaitDialog)}"/>
|
<apex:includeScript value="{!URLFOR($Resource.jspdf)}"/>
|
<apex:includeScript value="{!URLFOR($Resource.html2canvas)}"/>
|
|
<!-- 20220221 PI改造 by 徐亮 end -->
|
<!-- 20220221 PI改造 by 徐亮 start -->
|
<script>
|
AWSService.sfSessionId = '{!GETSESSIONID()}';
|
sforce.connection.serverUrl = '{!$Site.Prefix}/services/Soap/u/53.0';
|
var staticResourceContact = JSON.parse('{!staticResourceContact}');
|
var staticResourceOpportunity = JSON.parse('{!staticResourceOpportunity}');
|
var staticResourceFile = JSON.parse('{!staticResourceFile}');
|
function Fun(pdf) {
|
|
var form = jQuery("<form method='post'></form>");
|
jQuery(document.body).append(form);
|
let href = window.location.href
|
let arr = href.split('/')
|
form.attr({ "action": staticResourceFile.hostUrl + staticResourceFile.extraInfo + "?from=" + encodeURIComponent(href) + "&fileName=" + encodeURIComponent(arr[arr.length - 1].split('?')[0]) });
|
// form.attr({"action":"http://127.0.0.1:8080/a/d?from="+encodeURIComponent(window.location.href)});
|
let input = jQuery("<input type='hidden'/>");
|
input.attr({ "name": "base64Str" });
|
input.val(pdf.output('datauristring').substr(28));
|
form.append(input);
|
form.submit();
|
|
// jQuery("body > *").each(function(){
|
// jQuery(this).css('display','none');
|
// })
|
// jQuery("body").append('<embed style="position:absolute; left: 0; top: 0;" width="100%" height="100%" src="'+pdf.output('datauristring')+'" type="application/pdf"/>')
|
|
}
|
|
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 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页面高度
|
var leftHeight = contentHeight;
|
//页面偏移
|
var position = 0;
|
|
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
|
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 captureHeight = null;// 截取的当前canvas页的高度
|
|
let j = i;
|
while(position < contentHeight){
|
|
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;
|
}
|
}
|
|
recursion(i + 1);
|
}
|
})
|
};
|
recursion(rei);
|
|
|
|
}
|
|
//blockme();
|
document.body.onload = function(){
|
|
let i = 0;
|
let Foo = function(){
|
if ( i == 2) {
|
if(confirm("PDF已加载完毕，是否显示？")){
|
jsPdfDownload();
|
}
|
}
|
}
|
|
AWSService.query(staticResourceContact.queryUrl, '{!quoteInfo.conAwsDataId}', function(data){
|
//unblockUI();
|
document.getElementById("accountContactName").innerHTML = data.object.lastName;
|
document.getElementById("accountContactPhone").innerHTML = data.object.phone;
|
document.getElementById("accountContactEmail").innerHTML = data.object.email;
|
i++;
|
Foo();
|
}, staticResourceContact.token);
|
|
AWSService.query(staticResourceOpportunity.queryUrl, '{!quoteInfo.oppAwsDataId}', function(data){
|
//unblockUI();
|
document.getElementById("dealerContactName").innerHTML = data.object.dealerSalesStaffName;
|
i++;
|
Foo();
|
}, staticResourceOpportunity.token);
|
}
|
|
|
|
</script>
|
<!-- 20220221 PI改造 by 徐亮 end -->
|
</apex:page>
|
