- 效果如下：
image.png
【引入的插件】
import * as LodopFuncs from '@/common/LodopFuncs.js';
// LodopFuncs.js
/* eslint-disable */
import { Message } from 'element-ui';
let CreatedOKLodop7766 = null;
//====判断是否需要安装CLodop打印服务器:====
export function needCLodop() {
try {
let ua = navigator.userAgent;
if (ua.match(/Windows\sPhone/i) != null) return true;
if (ua.match(/iPhone|iPod/i) != null) return true;
if (ua.match(/Android/i) != null) return true;
if (ua.match(/Edge\D?\d+/i) != null) return true;
let verTrident = ua.match(/Trident\D?\d+/i);
let verIE = ua.match(/MSIE\D?\d+/i);
let verOPR = ua.match(/OPR\D?\d+/i);
let verFF = ua.match(/Firefox\D?\d+/i);
let x64 = ua.match(/x64/i);
if ((verTrident == null) && (verIE == null) && (x64 !== null))
return true;
else
if (verFF !== null) {
verFF = verFF[0].match(/\d+/);
if ((verFF[0] >= 41) || (x64 !== null)) return true;
} else
if (verOPR !== null) {
verOPR = verOPR[0].match(/\d+/);
if (verOPR[0] >= 32) return true;
} else
if ((verTrident == null) && (verIE == null)) {
let verChrome = ua.match(/Chrome\D?\d+/i);
if (verChrome !== null) {
verChrome = verChrome[0].match(/\d+/);
if (verChrome[0] >= 41) return true;
}
}
return false;
} catch (err) { return true }
}
//====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {
let head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
let oscript = document.createElement('script');
oscript.src = 'https://localhost:8443/CLodopfuncs.js';
head.insertBefore(oscript, head.firstChild);
//引用双端口(8000和18000）避免其中某个被占用：
oscript = document.createElement('script');
oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=0';
head.insertBefore(oscript, head.firstChild);
}
//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT, oEMBED) {
let strHtmInstall = '<br><font color=\'#FF00FF\'>打印控件未安装!点击这里<a href=\'/CS/install_lodop32.exe\' target=\'_self\'>执行安装</a>,安装后请刷新页面或重新进入。</font>';
let strHtmUpdate = '<br><font color=\'#FF00FF\'>打印控件需要升级!点击这里<a href=\'/CS/install_lodop32.exe\' target=\'_self\'>执行升级</a>,升级后请重新进入。</font>';
let strHtm64_Install = '<br><font color=\'#FF00FF\'>打印控件未安装!点击这里<a href=\'/CS/install_lodop64.exe\' target=\'_self\'>执行安装</a>,安装后请刷新页面或重新进入。</font>';
let strHtm64_Update = '<br><font color=\'#FF00FF\'>打印控件需要升级!点击这里<a href=\'/CS/install_lodop64.exe\' target=\'_self\'>执行升级</a>,升级后请重新进入。</font>';
let strHtmFireFox = '<br><br><font color=\'#FF00FF\'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>';
let strHtmChrome = '<br><br><font color=\'#FF00FF\'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>';
let strCLodopInstall = '<br><font color=\'#FF00FF\'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href=\'/CS/CLodop_Setup_for_Win32NT.exe\' target=\'_self\'>执行安装</a>,安装后请刷新页面。</font>';
let strCLodopUpdate = '<br><font color=\'#FF00FF\'>CLodop云打印服务需升级!点击这里<a href=\'/CS/CLodop_Setup_for_Win32NT.exe\' target=\'_self\'>执行升级</a>,升级后请刷新页面。</font>';
let LODOP;
try {
let isIE = (navigator.userAgent.indexOf('MSIE') >= 0) || (navigator.userAgent.indexOf('Trident') >= 0);
if (needCLodop()) {
try { LODOP = getCLodop() } catch (err) {}
if (!LODOP && document.readyState !== 'complete') {
// Message.error('C-Lodop没准备好，请稍后再试！');
return;
}
if (!LODOP) {
if (isIE) document.write(strCLodopInstall);
else
Message.error('CLodop云打印服务(localhost本地)未安装启动');
return;
} else {
if (CLODOP.CVERSION < '2.1.6.3') {
if (isIE) document.write(strCLodopUpdate);
else
document.documentElement.innerHTML = strCLodopUpdate + document.documentElement.innerHTML;
}
if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
}
} else {
var is64IE = isIE && (navigator.userAgent.indexOf('x64') >= 0);
//=====如果页面有Lodop就直接使用，没有则新建:==========
if (oOBJECT != undefined || oEMBED != undefined) {
if (isIE) LODOP = oOBJECT;
else LODOP = oEMBED;
} else if (CreatedOKLodop7766 == null) {
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);
CreatedOKLodop7766 = LODOP;
} else LODOP = CreatedOKLodop7766;
//=====Lodop插件未安装时提示下载地址:==========
if ((LODOP == null) || (typeof (LODOP.VERSION) == 'undefined')) {
if (navigator.userAgent.indexOf('Chrome') >= 0)
document.documentElement.innerHTML = strHtmChrome + document.documentElement.innerHTML;
if (navigator.userAgent.indexOf('Firefox') >= 0)
document.documentElement.innerHTML = strHtmFireFox + document.documentElement.innerHTML;
if (is64IE) document.write(strHtm64_Install);
else
if (isIE) document.write(strHtmInstall);
else
document.documentElement.innerHTML = strHtmInstall + document.documentElement.innerHTML;
return LODOP;
}
}
if (LODOP.VERSION < '6.2.1.8') {
if (!needCLodop()) {
if (is64IE) document.write(strHtm64_Update);
else
if (isIE) document.write(strHtmUpdate);
else
document.documentElement.innerHTML = strHtmUpdate + document.documentElement.innerHTML;
}
return LODOP;
}
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
//===========================================================
return LODOP;
} catch (err) { Message.error('getLodop出错:' + err) }
}
- 事件源代码如下：
let LODOP = LodopFuncs.getLodop();
LODOP.PRINT_INIT('打印入库单'); // 打印初始化
//LODOP.SET_PRINT_PAGESIZE(1,800,400,''); // 设定纸张大小
let printContent = {
demanddepartment: "9000",
ordertypeid: "采购入库",
suppliertext: "56/上海金桥信息股份有限公司",
accountingvoucher: "",
materialvoucher: "11111111111",
factorycode: "9000",
purcharseno: "1111111111111111111",
voucherdate: "",
projecttext: "18003217575/国网河北保定供电公司2020年电力需求响应体系建设提升工程基站改造",
movetext: "",
contractno: "11111111111111",
bookkeepingdate: "",
headtext: "",
creatorUser: "",
adminUser: "",
approval: "",
totalquantity: "1",
totalrealquantity: "1",
totalamount: "2093",
printdate: "2020-06-20 14:28:40",
orderdetailList: [{
orderdetailno: null,
seqno: null,
materialcode: "703397968",
materialname: "变压器1变压器1变压器1变压器1",
batchno: "11111111111",
baseunitname: "台",
quantity: "1",
realquantity: "1",
account: null,
whno: "XACK",
price: "2093",
amount: "2093",
note: null,
},{
orderdetailno: null,
seqno: null,
materialcode: "703397968",
materialname: "变压器2",
batchno: "11111111111",
baseunitname: "台",
quantity: "1",
realquantity: "1",
account: null,
whno: "XACK",
price: "2093",
amount: "2093",
note: null,
},{
orderdetailno: null,
seqno: null,
materialcode: "703397968",
materialname: "变压器3",
batchno: "11111111111",
baseunitname: "台",
quantity: "1",
realquantity: "1",
account: null,
whno: "XACK",
price: "2093",
amount: "2093",
note: null,
},{
orderdetailno: null,
seqno: null,
materialcode: "703397968",
materialname: "变压器4",
batchno: "11111111111",
baseunitname: "台",
quantity: "1",
realquantity: "1",
account: null,
whno: "XACK",
price: "2093",
amount: "2093",
note: null,
},{
orderdetailno: null,
seqno: null,
materialcode: "703397968",
materialname: "变压器5",
batchno: "11111111111",
baseunitname: "台",
quantity: "1",
realquantity: "1",
account: null,
whno: "XACK",
price: "2093",
amount: "2093",
note: null,
},{
orderdetailno: null,
seqno: null,
materialcode: "703397968",
materialname: "变压器6",
batchno: "11111111111",
baseunitname: "台",
quantity: "1",
realquantity: "1",
account: null,
whno: "XACK",
price: "2093",
amount: "2093",
note: null,
},{
orderdetailno: null,
seqno: null,
materialcode: "703397968",
materialname: "变压器7",
batchno: "11111111111",
baseunitname: "台",
quantity: "1",
realquantity: "1",
account: null,
whno: "XACK",
price: "2093",
amount: "2093",
note: null,
}]
};
let pageSize = 2;
let pageNo = 1;
if(printContent.orderdetailList && printContent.orderdetailList.length){
pageNo = Math.ceil(printContent.orderdetailList.length/pageSize);
for(let i=1;i<=pageNo;i++){
let printContentHTML = `<table border=1 width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse" bordercolor="#000000">
<thead>
<tr>
<th width="100%" height="80px" colspan="12" tindex="1" style="font-size: 30px;">雄安公司入库单</th>
</tr>
<tr>
<th width="100%" height="30px" colspan="12" tindex="1" style=" text-indent: 1em;" align="left">入库类型：${printContent.ordertypeid}</th>
</tr>
<tr height="60px">
<th colspan="2">公司代码/名称：</th>
<th colspan="2">${printContent.demanddepartment}</th>
<th colspan="2">供应商编码/名称：</th>
<th colspan="2">${printContent.suppliertext}</th>
<th colspan="2">物料凭证号：</th>
<th colspan="2"></th>
</tr>
<tr height="30px">
<th colspan="2">会计凭证：</th>
<th colspan="2">${printContent.accountingvoucher}</th>
<th colspan="2">工厂代码/名称：</th>
<th colspan="2">${printContent.factorycode}</th>
<th colspan="2">订单号：</th>
<th colspan="2">${printContent.purcharseno}</th>
</tr>
<tr height="30px">
<th colspan="2">凭证输入日期：</th>
<th colspan="2">${printContent.voucherdate}</th>
<th colspan="2">项目编号/名称：</th>
<th colspan="2">${printContent.projecttext}</th>
<th colspan="2">移动类型代码/名称：</th>
<th colspan="2">${printContent.movetext}</th>
</tr>
<tr height="30px">
<th colspan="2">合同编号：</th>
<th colspan="2">${printContent.contractno}</th>
<th colspan="2">记账日期：</th>
<th colspan="2">${printContent.bookkeepingdate}</th>
<th colspan="2">抬头文本：</th>
<th colspan="2">${printContent.headtext}</th>
</tr>
<tr height="30px">
<th width="6%">序号</th>
<th width="10%">物料编码</th>
<th width="10%">物料描述</th>
<th width="8%">计量单位</th>
<th width="8%">计量数量</th>
<th width="8%">实收数量</th>
<th width="8%">单价</th>
<th width="8%">总价</th>
<th width="10%">库存地点</th>
<th width="8%">账户分配</th>
<th width="8%">批次号</th>
<th width="8%">备注</th>
</tr>
</thead>
`
for(let j=1;j<=pageSize;j++){
if((j+(i-1)*pageSize)<=printContent.orderdetailList.length){
printContentHTML+= `<tr height="30px">
<td align="center">${j+(i-1)*pageSize}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].materialcode!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].materialcode:''}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].materialname!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].materialname:''}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].baseunitname!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].baseunitname:''}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].quantity!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].quantity:''}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].realquantity!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].realquantity:''}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].price!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].price:''}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].amount!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].amount:''}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].whno!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].whno:''}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].account!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].account:''}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].batchno!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].batchno:''}</td>
<td align="center">${printContent.orderdetailList[j-1+(i-1)*pageSize].note!=null?printContent.orderdetailList[j-1+(i-1)*pageSize].note:''}</td>
</tr>`
} else {
console.log('1111111111');
break;
}
}
printContentHTML+=`
<tfoot>
<tr>
<th height="30px" align="left" colspan="4" style="text-indent: 1em;">合计:</th>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
<th align="center"></th>
</tr>
<tr>
<th height="80px" align="left" colspan="12">
<div style="display: flex;line-height: 32px;">
<span style="width: 33.33%;text-indent: 1em;">制单人：${printContent.creatorUser}</span>
<span style="width: 33.33%;">库管员：${printContent.adminUser}</span>
<span style="width: 33.33%;">仓储主管审核：${printContent.approval}</span>
</div>
<div style="display: flex;line-height: 32px;">
<span style="width: 66.66%;text-indent: 1em;">打印日期：${printContent.printdate}</span>
<span style="width: 33.33%;">页码：${i}</span>
</div>
</th>
</tr>
<tr>
<th height="60px" align="left" colspan="12" style=" text-indent: 1em;">
说明： 1、入库类型包括采购入库和调拨入库。
</th>
</tr>
</tfoot>
</table>
<img border="0" src="/static/images/order_logo.png"
style="z-index: -1; position: absolute; left:1px; top:1px;" /> `
LODOP.NewPage();
LODOP.ADD_PRINT_HTM(50,"5%","90%","100%",printContentHTML);
LODOP.ADD_PRINT_BARCODE(170,890,150,42,"128B",printContent.materialvoucher); // top,left,width,height,条码的类型（规制）名称,条码值
}
}
LODOP.PREVIEW();
网友评论