web打印插件-CLODOP
<div class="container-div">
<div id="print" style="font-family:黑体;">
<div id="printContet" media='print' class="pdf-wrapper">
</div>
</div>
</div>
<script type="text/javascript">
var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
var LODOP;
var $;
var ids = ys.request("ids");
var printContents = []
$(function () {
getForm()
});
//打印方法
function htmlToPDF(printDiv, filesName) {
html2canvas(printDiv, {
foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
useCORS: true, // 是否尝试使用CORS从服务器加载图像
async: false, // 是否异步解析和呈现元素
// 以下字段必填
background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
dpi: 300, // 处理模糊问题
onrendered: function (canvas) {
document.getElementById("printImageBox").appendChild(canvas);
//printDiv.appendChild(canvas);
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 = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/png', 1.0)
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
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(filesName);
}
})
}
//==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop() {
try {
var ua = navigator.userAgent;
if (ua.match(/Windows\sPhone/i))
return true;
if (ua.match(/iPhone|iPod|iPad/i))
return true;
if (ua.match(/Android/i))
return true;
if (ua.match(/Edge\D?\d+/i))
return true;
var verTrident = ua.match(/Trident\D?\d+/i);
var verIE = ua.match(/MSIE\D?\d+/i);
var verOPR = ua.match(/OPR\D?\d+/i);
var verFF = ua.match(/Firefox\D?\d+/i);
var x64 = ua.match(/x64/i);
if ((!verTrident) && (!verIE) && (x64))
return true;
else if (verFF) {
verFF = verFF[0].match(/\d+/);
if ((verFF[0] >= 41) || (x64))
return true;
} else if (verOPR) {
verOPR = verOPR[0].match(/\d+/);
if (verOPR[0] >= 32)
return true;
} else if ((!verTrident) && (!verIE)) {
var verChrome = ua.match(/Chrome\D?\d+/i);
if (verChrome) {
verChrome = verChrome[0].match(/\d+/);
if (verChrome[0] >= 41)
return true;
}
}
return false;
} catch (err) {
return true;
}
}
//==加载引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
function loadCLodop() {
if (CLodopJsState == "loading" || CLodopJsState == "complete") return;
CLodopJsState = "loading";
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
var JS1 = document.createElement("script");
var JS2 = document.createElement("script");
JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
JS2.src = "http://localhost:18000/CLodopfuncs.js";
JS1.onload = JS2.onload = function () { CLodopJsState = "complete"; }
JS1.onerror = JS2.onerror = function (evt) { CLodopJsState = "complete"; }
head.insertBefore(JS1, head.firstChild);
head.insertBefore(JS2, head.firstChild);
CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
}
if (needCLodop()) { loadCLodop(); }//加载
//==获取LODOP对象主过程,判断是否安装、需否升级:==
function getLodop(oOBJECT, oEMBED) {
var strHtmInstall = "<font color='#FF00FF'>打印控件未安装!点击这里<a href='/lib/lodop/install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtmUpdate = "<font color='#FF00FF'>打印控件需要升级!点击这里<a href='/lib/lodop/install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtm64_Install = "<font color='#FF00FF'>打印控件未安装!点击这里<a href='/lib/lodop/install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtm64_Update = "<font color='#FF00FF'>打印控件需要升级!点击这里<a href='/lib/lodop/install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtmFireFox = "<font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
var strHtmChrome = "<font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
var strCLodopInstall_1 = "<font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='/lib/lodop/CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
var strCLodopInstall_2 = "（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
var strCLodopInstall_3 = "，成功后请刷新本页面。</font>";
var strCLodopUpdate = "<font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='/lib/lodop/CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
var LODOP;
try {
var ua = navigator.userAgent;
var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
if (needCLodop()) {
try {
LODOP = getCLodop();
} catch (err) { }
if (!LODOP && CLodopJsState !== "complete") {
if (CLodopJsState == "loading") {
layer.alert("网页还没下载完毕，请稍等一下再操作.")
} else {
layer.alert("没有加载CLodop的主js，请先调用loadCLodop过程.")
}
return false;
}
if (!LODOP) {
layer.alert(strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3);
return false;
} else {
if (CLODOP.CVERSION < "4.1.0.4") {
layer.alert(strCLodopUpdate);
}
if (oEMBED && oEMBED.parentNode) {
oEMBED.parentNode.removeChild(oEMBED); //清理旧版无效元素
}
if (oOBJECT && oOBJECT.parentNode) {
oOBJECT.parentNode.removeChild(oOBJECT);
}
}
} else {
var is64IE = isIE && !!(ua.match(/x64/i));
//==如果页面有Lodop就直接使用,否则新建:==
if (oOBJECT || oEMBED) {
if (isIE) {
LODOP = oOBJECT;
} else {
LODOP = oEMBED;
}
} else if (!CreatedOKLodopObject) {
LODOP = document.createElement("object");
LODOP.setAttribute("width", 0);
LODOP.setAttribute("height", 0);
LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
if (isIE) {
LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
} else {
LODOP.setAttribute("type", "application/x-print-lodop");
}
document.documentElement.appendChild(LODOP);
CreatedOKLodopObject = LODOP;
} else {
LODOP = CreatedOKLodopObject;
}
//==Lodop插件未安装时提示下载地址:==
if ((!LODOP) || (!LODOP.VERSION)) {
if (ua.indexOf('Chrome') >= 0) {
layer.alert(strHtmChrome);
}
if (ua.indexOf('Firefox') >= 0) {
layer.alert((is64IE ? strHtm64_Install : strHtmInstall) + strHtmFireFox);
}
return LODOP;
}
}
if (LODOP.VERSION < "6.2.2.6") {
if (!needCLodop()) {
layer.alert(is64IE ? strHtm64_Update : strHtmUpdate);
}
}
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
//=======================================================
return LODOP;
} catch (err) {
alert("getLodop出错:" + err);
}
}
function getForm() {
ys.ajax({
url: '@Url.Content("~/OrderManage/Order/GetPrintOrder")' + '?ids=' + ids,
type: 'post',
success: function (obj) {
if (obj.Tag == 1) {
var data = obj.Result;
for (i in data) {
//$("#printTable").remove();
// 将数据转换成打印html
var content = printGoodsTemplate(data[i],i);
// 多组数据多页打印
printContents.push(content)
$("#printContet").append(content);
}
}
else {
ys.msgError(obj.Message);
}
}
});
}
// 打印
function saveForm(index) {
LODOP = getLodop();
for(let i = 0; i < printContents.length; i ++) {
LODOP.NewPageA();
// LODOP.NewPage();强制分页，前面的自动分页会覆盖后面的页面，和后面页面内容同时输出。
// LODOP.NewPageA();强制分页，前面的自动分页，后面的页面会在自动分页的后面添加新页面。
LODOP.ADD_PRINT_HTM(20, "5%", "90%", "100%", document.getElementById("printTable" + i).innerHTML);
}
LODOP.PREVIEW();
}
//打印模板
function printGoodsTemplate(data,index) {
var dataContet = "" +
"<div id='printTable" + index + "'>" +
"<div media='print' style='font-family:黑体; font-size:10px;margin-top: 22px; padding: 5px;'>" +
"<div style='width:100%;margin:0 auto;text-align: center;'>" +
"<h2 style='font-weight:bold' media='print'>" + "浙江元通汽车零部件有限公司" + "</h2>" +
"<h3 style='padding:12px 0px 34px 0;'>拣货单</h3>" +
/*" <div style='float:right; font-size: 14px;font-weight: 800;'>1/1</div>" + */
" </div>" +
"<div style='margin: 10px 0;width:100%;overflow:hidden'>" +
" <div style='width:50%;float:left'>送货客户：<span id=''>" + isNullOrUndef(data.CustomerName) + "</span></div>" +
" <div style='width:25%;float:left'>出库日期：<span id=''>" + ys.formatDate(new Date(), "yyyy-MM-dd") + "</span></div>" +
" <div style='width:25%;float:left'>订单号：<span id=''>" + isNullOrUndef(data.Id) + "</span></div>" +
"</div>" +
"<div style='margin: 10px 0'>" +
" <div>备注：<span id=''>" + isNullOrUndef(data.OrderRemark) + "</span></div>" +
"</div>" +
" <table border='1' cellspacing='0' cellpadding='0' border-collapse='separate' style='width:100%;table-layout:fixed;font-size:12px' id='printtable2'>" +
" <tr height='30px;'>" +
" <td style='text-align:center;margin: 0; padding: 0;font-weight:bold;width:55px'>序号</td>" +
" <td style='text-align:center;margin: 0; padding: 0;font-weight:bold;width:120px'>备件号</td>" +
" <td style='text-align:center;margin: 0; padding: 0;font-weight:bold;'>备件名</td>" +
" <td style='text-align:center;margin: 0; padding: 0;font-weight:bold;'>规格</td>" +
" <td style='text-align:center;margin: 0; padding: 0;font-weight:bold;width:55px'>数量</td>" +
" <td style='text-align:center;margin: 0; padding: 0;font-weight:bold;width:55px'>单位</td>" +
" <td style='text-align:center;margin: 0; padding: 0;font-weight:bold;width:80px'>品牌</td>" +
" </tr>";
for (let i = 0; i < data.Details.length; i++) {
dataContet += "<tr height='30px;'>" +
"<td style='text-align:center; margin: 0; padding: 0'>" + (i+1) + "</td>" +
"<td style='text-align:center; margin: 0; padding: 0;word-wrap:break-word;overflow:hidden;'>" + isNullOrUndef(data.Details[i].ProductCode) + "</td>" +
"<td style='text-align:center; margin: 0; padding: 0;word-wrap:break-word;overflow:hidden;'>" + isNullOrUndef(data.Details[i].ProductName) + "</td>" +
"<td style='text-align:center; margin: 0; padding: 0;word-wrap:break-word;overflow:hidden;'>" + isNullOrUndef(data.Details[i].Spec) + "</td>" +
"<td style='text-align:center; margin: 0; padding: 0'>" + isNullOrUndef(data.Details[i].Count) + "</td>" +
"<td style='text-align:center; margin: 0; padding: 0'>" + isNullOrUndef(data.Details[i].Unit) + "</td>" +
"<td style='text-align:center; margin: 0; padding: 0'>" + isNullOrUndef(data.Details[i].ProductBrand) + "</td>" +
"</tr>";
}
dataContet += "</table>" +
" <div>" +
" <div style='margin: 10px 0'>" +
" <span>送货地址：</span><span id='qtyTranPlanBillCount'>" + isNullOrUndef(data.ReceviceAddress) + " " + isNullOrUndef(data.ReceviceManPhone) + "</span>" +
" </div>" +
" </div>" +
" <div class=''>" +
" <div style='width:18%;float:left'>" +
" <span>开单员： </span><span id='qtyTranPlanBillCount'>" + "" + "</span>" +
" </div>" +
" <div style='width:18%;float:left'>" +
" <span>发货员： </span><span id='qtyOrderCount'></span>" +
" </div>" +
" <div style='width:23%;float:left'>" +
" <span>配送领料员： </span><span id='qtyBrandCount'></span>" +
" </div>" +
" <div style='width:18%;float:left'>" +
" <span>客户签收： </span><span id='qtyDrawSum'></span>" +
" </div>" +
" <div style='width:23%;float:left'>" +
" <span>签收日期： </span><span id='amtDrawSum'></span>" +
" </div>" +
" </div>" +
" </div>";
return dataContet;
}
//去空
function isNullOrUndef(str) {
if ((str == null || str == undefined || str == "") && str != 0) {
return "";
}
return str;
}
</script>
