一、前往lodop官网,下载插件,下载中心 - Lodop和C-Lodop官网主站
这里下载的window64位的,将插件安装好,运行,会看到
引入项目
第一种、可以直接将script标签放入vue的head中,在项目运行时自动加载。
第二种、也可以将js文件下载至本地,通过import引入,前提是将CLODOP对象export出来。
通常使用第三种方法
这里使用第三种方法,即动态加载方法,根据当前系统的环境及文件状态加载
代码:stamp.js
var CreatedOKLodop7766=null
//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){
try{
var 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
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==null)&&(verIE==null)&&(x64!==null))
return true
else if (verFF !== null) {
verFF = verFF[0].match(/\d+/)
if ((verFF[0]>= 42)||(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)) {
var verChrome=ua.match(/Chrome\D?\d+/i)
if ( verChrome !== null ) {
verChrome = verChrome[0].match(/\d+/)
if (verChrome[0]>=42) return true
}
}
return false
} catch(err) {return true}
}
//====页面引用CLodop云打印必须的JS文件:====
if (needCLodop()) {
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement
var oscript = document.createElement("script")
oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=1"
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){
var strHtmInstall="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
var strHtmUpdate="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"
var strHtm64_Install="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
var strHtm64_Update="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"
var strHtmFireFox="<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>"
var strHtmChrome="<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>"
var strCLodopInstall="<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='http://www.c-lodop.com/download/CLodop_Setup_for_Win32NT_https_3.008Extend.zip' target='_self'>执行安装</a>,安装后请刷新页面。</font>"
var strCLodopUpdate="<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>"
var LODOP
try{
var isIE = (navigator.userAgent.indexOf('MSIE')>=0) || (navigator.userAgent.indexOf('Trident')>=0)
if (needCLodop()) {
try{ LODOP=getCLodop()} catch(err) {}
if (!LODOP && document.readyState!=="complete") {
alert("C-Lodop没准备好,请稍后再试!")
return
}
if (!LODOP) {
// if (isIE) document.write(strCLodopInstall) else
// document.documentElement.innerHTML=strCLodopInstall+document.documentElement.innerHTML
// return
} else {
if (CLODOP.CVERSION<"3.0.0.2") {
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:absoluteleft:0pxtop:-100pxwidth:0pxheight: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.0") {
if (!needCLodop()){
if (is64IE) document.write(strHtm64_Update)
else if (isIE) document.write(strHtmUpdate)
else document.documentElement.innerHTML=strHtmUpdate+document.documentElement.innerHTML
}
return LODOP
}
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
//LODOP.SET_LICENSES("北京XXXXX公司","8xxxxxxxxxxxxx5","","")
//===========================================================
return LODOP
} catch(err) {alert("请安装Lodop主程序!"); return null;}
}
在项目中引入:
<template>
<div id="print_page">
<div><el-button type="success" @click="print1()">打印送货单</el-button></div>
</div>
</template>
import { getLodop } from "./stamp";
export default {
data () {
return {
orderDocuments: [], //打印表格内容 内容数据需要自己编写
printerList:[] //将打印机存入printerList数组中
}
},
methods:{
print1(){
this.LODOP = getLodop(); // 创建一个LODOP对象
let counter = this.LODOP.GET_PRINTER_COUNT(); // 获取打印机个数
for (let i = 0; i < counter; i++) {
this.printerList.push({
// 将打印机存入printerList数组中
name: this.LODOP.GET_PRINTER_NAME(i),
value: i,
});
}
var html = "";
for (let d = 0; d < this.orderDocuments.length; d++) {
html += `
<h1 style="text-align: center;">配送单</h1>
<span format="ChineseNum"></span>
<br/>
<table role="table" style="margin-top:30px;padding:0px;width:100%;border-collapse:collapse;height:100px;font-size:25px;">
<thead>
<tr style="height:20px;">
<th style="text-align:center;font-size:30px;" colspan="10" type="header" name="goods_count">配送单</th>
</tr>
<tr style="height:20px;">
<th style="" colspan="10" type="header" name="goods_count"></th>
</tr>
<tr>
<th style="text-align:left; padding:5px 1px;" colspan="2" type="header" name="deliveryId">配送单:${
this.orderDocuments[d].deliveryId
}</th>
<th style="text-align:left; padding:5px 1px; word-break:break-all; width:100px;" colspan="3" type="header" name="department">下单人:${
this.orderDocuments[d].buyUser
}</th>
<th style="text-align:left; padding:5px 1px;" colspan="2" type="header" name="deliveryTime">配送时间:${
this.orderDocuments[d].deliveryTime.slice(0, -9)
}</th>
<th style="text-align:left; padding:5px 1px; word-break:break-all;" colspan="3" type="header" name="orderAmount">订单总额:${
this.orderDocuments[d].orderAmount
}</th>
</tr>
<tr style=" padding:5px 0;">
<th style="border: 1px solid black; padding:5px 0;" rowspan="1" type="header" name="goods_name">序号</th>
<th style="border: 1px solid black;" rowspan="1" type="header" name="goods_spec">商品名称</th>
<th style="border: 1px solid black" rowspan="1" type="header" name="goods_price">单位</th>
<th style="border: 1px solid black" rowspan="1" type="header" name="goods_count">规格</th>
<th style="border: 1px solid black; width:120px;" rowspan="1" type="header" name="goods_money">基准价</th>
<th style="border: 1px solid black; width:120px;" rowspan="1" type="header" name="goods_money">结算价</th>
<th style="border: 1px solid black; width:100px;" rowspan="1" type="header" name="goods_money">数量</th>
<th style="border: 1px solid black; width:100px;" rowspan="1" type="header" name="goods_money">小计</th>
</tr>
</thead>
<tbody class="chris-table-body">
${this.orderDocuments[d].goodsList
.map((i, index) => {
return `<tr class="chris-table-row first last" role="row">
<td style="border: 1px solid black;text-align:center; padding:5px 0; word-break:break-all; width:100px;" type="body" name="goods_name">${
index + 1
}</td>
<td style="border: 1px solid black;text-align:center; word-break:break-all; width:150px;" type="body" name="goods_spec">${
i.goodsName
}</td>
<td style="border: 1px solid black;text-align:center; word-break:break-all; width:100px;" type="body" name="goods_price">${
i.goodsMeasure
}</td>
<td style="border: 1px solid black;text-align:center; word-break:break-all;width:160px;" type="body" name="goods_count">${
i.goodsStandard
}</td>
<td style="border: 1px solid black;text-align:right;padding-right:1px;" type="body" name="goods_money">¥${
i.benchmarkPrice
}</td>
<td style="border: 1px solid black;text-align:right;padding-right:1px;" type="body" name="goods_name">¥${
i.purchasePrice
}</td>
<td style="border: 1px solid black;text-align:right;padding-right:1px;" type="body" name="goods_spec">${
i.mount
}</td>
<td style="border: 1px solid black;text-align:right;padding-right:1px;" type="body" name="goods_price">¥${
i.amount
}</td>
</tr>
${
i.remark != null
? `<tr class="chris-table-row first last"><td type="body" style="border:1px solid black; word-break:break-all; width:100%;" name="goods_name" colspan="10">${i.remark}</td></tr>`
: ""
}
`;
})
.join(" ")}
${ this.orderDocuments[d].remark != null ? `<tr class="chris-table-row first last" style="border:1px solid black;"><td type="body" style="border:1px solid black; word-break:break-all; width:100%;" name="goods_name" colspan="10">${this.orderDocuments[d].remark}</td></tr>` : null}
</tbody>
<tfoot>
<tr style="height:20px;">
<th style="" colspan="10 type="header" name="goods_count"></th>
</tr>
<tr>
<th style="text-align:left;" rowspan="1" type="header" colspan="3"
name="goods_name">配送人:</th>
<th style="text-align:left;" rowspan="1" type="header" name="goods_spec" colspan="3">签收人:</th>
<th style="text-align:left;" rowspan="1" type="header" name="goods_price" colspan="3">监管人:</th>
</tr>
</tfoot>
</table>
<br/>
`;
}
var body = "<body style='text-align:center;'>" + html + "</body>";
const _this = this;
_this.LODOP.PRINT_INIT("打印发货单"); //打印初始化
_this.LODOP.SET_PRINTER_INDEX(_this.printer); //选择的打印机类型(注意这里是打印机下标,0开始的)
_this.LODOP.SET_PRINT_STYLE("FontSize", 18); //设置对象风格
// this.LODOP.ADD_PRINT_TEXT(50, 521, 130, 39, this.description) //增加纯文本项
_this.LODOP.SET_PRINT_PAGESIZE(1, 2410, 2800, ""); //设定纸张大小
_this.LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "50%"); //设置缩放
_this.LODOP.SET_PRINT_STYLEA(0, "TextNeatRow", true);
_this.LODOP.SET_PREVIEW_WINDOW(2, 2, 0, 0, 0, ""); //设置窗口
_this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 60); //设置窗口
_this.LODOP.ADD_PRINT_TABLE(79, 20, 1500, "78%", body); //设置表格挂载
_this.LODOP.SET_PRINT_STYLEA(0, "Horient", 2);
_this.LODOP.ADD_PRINT_HTM(
"93%",
"90%",
"100mm",
"100mm",
"<font color='#000' style='font-size:25px;'><span tdata='pageNo'>##</span>/ <span tdata='pageCount'>##</span></font>" //分页
);
_this.LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
_this.LODOP.PREVIEW(); // 设置预览(如果使用预览,每次打印前会弹出预览窗口,根据需要决定是否使用)
}
}
}
点击打印按钮,会调用打印机 然后会出来预览打印 出现这样的一个表格
为了防止真正打印,这里将代码改为了打印预览,实际每调用一次会打印一次,也可以边请求后台数据边打,只要有纸,可以一直打,我最多打了二百多张纸,有问题的可以联系
标签:插件,document,return,自定义,头页,LODOP,var,null,match From: https://blog.csdn.net/m0_74079648/article/details/139518758