vue项目接入Web打印服务C-Lodop，实现用户自定义纸张大小，一般用于打印订单（如下图）。
打印预览
实现步骤：
1.安装C-Lopod控件 www.lodop.net/download.ht…
2.引入LodopFuncs.js文件
//用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
var MainJS ="CLodopfuncs.js",
URL_WS1 = "ws://localhost:8000/"+MainJS, //ws用8000/18000
URL_WS2 = "ws://localhost:18000/"+MainJS,
URL_HTTP1 = "http://localhost:8000/"+MainJS, //http用8000/18000
URL_HTTP2 = "http://localhost:18000/"+MainJS,
URL_HTTP3 = "https://localhost.lodop.net:8443/"+MainJS; //https用8000/8443
//==检查加载成功与否，如没成功则用http(s)再试==
//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
function checkOrTryHttp() {
if (window.getCLodop) return true;
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
var JS1 = document.createElement("script")
,JS2 = document.createElement("script")
,JS3 = document.createElement("script");
JS1.src = URL_HTTP1;
JS2.src = URL_HTTP2;
JS3.src = URL_HTTP3;
JS1.onerror = function(e) {
if (window.location.protocol !== 'https:')
head.insertBefore(JS2, head.firstChild); else
head.insertBefore(JS3, head.firstChild);
}
JS2.onerror = JS3.onerror=function(){
var JSelf = document.createElement("script");
JSelf.src = "/"+MainJS; //JSelf让其它电脑通过本机打印（仅适用CLodop自带例子）
document.head.insertBefore(JSelf, document.head.firstChild);
}
head.insertBefore(JS1,head.firstChild);
}
//==加载Lodop对象的主过程:==
(function loadCLodop(){
if (!window.WebSocket && window.MozWebSocket) window.WebSocket=window.MozWebSocket;
//ws方式速度快(小于200ms)且可避免CORS错误,但要求Lodop版本足够新:
try {
var WSK1=new WebSocket(URL_WS1);
WSK1.onopen = function(e) { setTimeout("checkOrTryHttp()",200); }
WSK1.onmessage = function(e) {if (!window.getCLodop) eval(e.data);}
WSK1.onerror = function(e) {
var WSK2=new WebSocket(URL_WS2);
WSK2.onopen = function(e) {setTimeout("checkOrTryHttp()",200);}
WSK2.onmessage = function(e) {if (!window.getCLodop) eval(e.data);}
WSK2.onerror= function(e) {checkOrTryHttp();}
}
} catch(e){
checkOrTryHttp();
}
})();
//==获取LODOP对象的主过程:==
function getLodop(oOBJECT, oEMBED) {
var LODOP;
try {
LODOP = window.getCLodop();
if (!LODOP && document.readyState !== "complete") {
alert("C-Lodop没准备好，请稍后再试！");
return;
}
//清理原例子内的object或embed元素，避免乱提示：
if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
if (oOBJECT && oOBJECT.parentNode)oOBJECT.parentNode.removeChild(oOBJECT);
return LODOP;
} catch (err) {
alert("未安装或启动Web打印服务C-Lodop！");
}
}
export default getLodop
3.vue文件
<template>
<div>
<!-- 打印部分的html，不能使用组件，需使用html标签 -->
<table
border="1"
cellpadding='0'
cellspacing='0'
style="border-color: #CCCCCC;border-collapse:collapse;height: auto;margin-top: 20px;width: 100%;box-sizing: border-box;"
>
<tr>
<th style="border-color: #CCCCCC;font-size: 14px;height: 40px;width: 5%;box-sizing: border-box">序号</th>
<th style="border-color: #CCCCCC;font-size: 14px;height: 40px;width: 15%;box-sizing: border-box">配件编码</th>
<th style="border-color: #CCCCCC;font-size: 14px;height: 40px;width: 10%;box-sizing: border-box">配件名称</th>
<th style="border-color: #CCCCCC;font-size: 14px;height: 40px;width: 15%;box-sizing: border-box">车型</th>
<th style="border-color: #CCCCCC;font-size: 14px;height: 40px;width: 10%;box-sizing: border-box">产地</th>
<th style="border-color: #CCCCCC;font-size: 14px;height: 40px;width: 5%;box-sizing: border-box">数量</th>
<th style="border-color: #CCCCCC;font-size: 14px;height: 40px;width: 10%;box-sizing: border-box">单价</th>
<th style="border-color: #CCCCCC;font-size: 14px;height: 40px;width: 10%;box-sizing: border-box">钉箱费</th>
<th style="border-color: #CCCCCC;font-size: 14px;height: 40px;width: 10%;box-sizing: border-box">总金额</th>
<th style="border-color: #CCCCCC;font-size: 14px;height: 40px;width: 10%;box-sizing: border-box">仓位</th>
</tr>
<tr v-for="(item, index) in tableData" :key="index">
<td style="border-color: #CCCCCC;padding: 5px;text-align: center;box-sizing: border-box;height: 40px;">{{index+1}}</td>
<td style="border-color: #CCCCCC;padding: 5px;text-align: center;box-sizing: border-box;">{{item.oe_number}}</td>
<td style="border-color: #CCCCCC;padding: 5px;text-align: center;box-sizing: border-box;">{{item.goods_title}}</td>
<td style="border-color: #CCCCCC;padding: 5px;text-align: center;box-sizing: border-box;">{{item.order_desc}}</td>
<td style="border-color: #CCCCCC;padding: 5px;text-align: center;box-sizing: border-box;">{{item.chandi}}</td>
<td style="border-color: #CCCCCC;padding: 5px;text-align: center;box-sizing: border-box;">{{item.quantity}}</td>
<td style="border-color: #CCCCCC;padding: 5px;text-align: center;box-sizing: border-box;">{{item.remark}}</td>
<td style="border-color: #CCCCCC;padding: 5px;text-align: center;box-sizing: border-box;">{{item.boxs_price}}</td>
<td style="border-color: #CCCCCC;padding: 5px;text-align: center;box-sizing: border-box;">{{item.remark}}</td>
<td style="border-color: #CCCCCC;padding: 5px;text-align: center;box-sizing: border-box;">{{item.warehouse}}</td>
</tr>
</table>
<el-button @click="confrimDy" type="primary">确认打印</el-button>
</div>
</template>
<script>
import getLodop from '../../print/LodopFuncs'
export default {
data() {
return {
tableData: [],
}
},
methods: {
confrimDy() {
const LODOP = getLodop()
// 为null时说明没获取到，没有安装或者启动插件都会导致该情况
if (LODOP == null) return console.log('没安装或者没启动')
// 获取表格打印内容（通过id获取节点）
const printHtml = document.querySelector('#printbox').innerHTML
// 打印初始化数据
LODOP.PRINT_INITA(1, 1, 770, 200, '预览')
LODOP.ADD_PRINT_HTM(30, 5, '100%', '80%', printHtml)
LODOP.SET_PRINT_PAGESIZE(3, 2100, 45, '') // 纸张大小且适用内容高度
LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Width')
LODOP.SET_PRINT_MODE('RESELECT_PRINTER', true) // 允许重选打印机
LODOP.SET_PRINT_MODE('RESELECT_ORIENT', true) // 允许重选纸张方向
LODOP.SET_PRINT_MODE('RESELECT_PAGESIZE', true) // 允许重选纸张
LODOP.SET_PRINT_MODE('RESELECT_COPIES', true) // 允许重选份数
LODOP.PREVIEW() //打印预览
},
}
}
</script>
