This commit is contained in:
魏啾
parent
ea0c01bb2b
commit
fd6410f742
|
|
@ -0,0 +1,207 @@
|
||||||
|
//==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==
|
||||||
|
|
||||||
|
//用双端口加载主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
|
||||||
|
|
||||||
|
var CreatedOKLodopObject, CLodopIsLocal, LoadJsState;
|
||||||
|
|
||||||
|
//==判断是否需要CLodop(那些不支持插件的浏览器):==
|
||||||
|
function needCLodop() {
|
||||||
|
try {
|
||||||
|
var ua = navigator.userAgent;
|
||||||
|
if (ua.match(/Windows\sPhone/i) ||
|
||||||
|
ua.match(/iPhone|iPod|iPad/i) ||
|
||||||
|
ua.match(/Android/i) ||
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//==检查加载成功与否，如没成功则用http(s)再试==
|
||||||
|
//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
|
||||||
|
function checkOrTryHttp() {
|
||||||
|
if (window.getCLodop) {
|
||||||
|
LoadJsState = "complete";
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (LoadJsState == "loadingB" || LoadJsState == "complete") return;
|
||||||
|
LoadJsState = "loadingB";
|
||||||
|
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.onload = JS2.onload = JS3.onload = JS2.onerror = JS3.onerror = function () {
|
||||||
|
LoadJsState = "complete";
|
||||||
|
}
|
||||||
|
JS1.onerror = function (e) {
|
||||||
|
if (window.location.protocol !== 'https:')
|
||||||
|
head.insertBefore(JS2, head.firstChild);
|
||||||
|
else
|
||||||
|
head.insertBefore(JS3, head.firstChild);
|
||||||
|
}
|
||||||
|
head.insertBefore(JS1, head.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
//==加载Lodop对象的主过程:==
|
||||||
|
(function loadCLodop() {
|
||||||
|
if (!needCLodop()) return;
|
||||||
|
CLodopIsLocal = !!((URL_WS1 + URL_WS2).match(/\/\/localho|\/\/127.0.0./i));
|
||||||
|
LoadJsState = "loadingA";
|
||||||
|
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 strFontTag = "<br><font color='#FF00FF'>打印控件";
|
||||||
|
var strLodopInstall = strFontTag + "未安装!点击这里<a href='https://h5-invoice.sxczgkj.cn/invo/czg.zip'>执行安装</a>";
|
||||||
|
var strLodopUpdate = strFontTag + "需要升级!点击这里<a href='https://h5-invoice.sxczgkj.cn/invo/czg.zip'>执行升级</a>";
|
||||||
|
var strLodop64Install = strFontTag + "未安装!点击这里<a href='https://h5-invoice.sxczgkj.cn/invo/czg.zip'>执行安装</a>";
|
||||||
|
var strLodop64Update = strFontTag + "需要升级!点击这里<a href='https://h5-invoice.sxczgkj.cn/invo/czg.zip'>执行升级</a>";
|
||||||
|
var strCLodopInstallA =
|
||||||
|
"<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='https://h5-invoice.sxczgkj.cn/invo/czg.zip'>下载执行安装</a>";
|
||||||
|
// var strCLodopInstallB = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
|
||||||
|
var strCLodopUpdate =
|
||||||
|
"<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='https://h5-invoice.sxczgkj.cn/invo/czg.zip'>执行升级</a>";
|
||||||
|
var strLodop7FontTag = "<br><font color='#FF00FF'>Web打印服务Lodop7";
|
||||||
|
var strLodop7HrefX86 = "点击这里<a href='https://h5-invoice.sxczgkj.cn/invo/czg.zip' target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
|
||||||
|
var strLodop7HrefARM = "点击这里<a href='https://h5-invoice.sxczgkj.cn/invo/czg.zip'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
|
||||||
|
var strLodop7Install_X86 = strLodop7FontTag + "未安装启动，" + strLodop7HrefX86;
|
||||||
|
var strLodop7Install_ARM = strLodop7FontTag + "未安装启动，" + strLodop7HrefARM;
|
||||||
|
var strLodop7Update_X86 = strLodop7FontTag + "需升级，" + strLodop7HrefX86;
|
||||||
|
var strLodop7Update_ARM = strLodop7FontTag + "需升级，" + strLodop7HrefARM;
|
||||||
|
var strInstallOK = "，成功后请刷新本页面或重启浏览器。</font>";
|
||||||
|
var LODOP;
|
||||||
|
try {
|
||||||
|
var isWinIE = (/MSIE/i.test(navigator.userAgent)) || (/Trident/i.test(navigator.userAgent));
|
||||||
|
var isWinIE64 = isWinIE && (/x64/i.test(navigator.userAgent));
|
||||||
|
var isLinuxX86 = (/Linux/i.test(navigator.platform)) && (/x86/i.test(navigator.platform));
|
||||||
|
var isLinuxARM = (/Linux/i.test(navigator.platform)) && (/aarch/i.test(navigator.platform));
|
||||||
|
|
||||||
|
if (needCLodop() || isLinuxX86 || isLinuxARM) {
|
||||||
|
try {
|
||||||
|
LODOP = window.getCLodop();
|
||||||
|
} catch (err) { }
|
||||||
|
if (!LODOP && LoadJsState !== "complete") {
|
||||||
|
if (!LoadJsState)
|
||||||
|
alert("未曾加载Lodop主JS文件，请先调用loadCLodop过程.");
|
||||||
|
else
|
||||||
|
alert("网页还没下载完毕，请稍等一下再操作.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var strAlertMessage;
|
||||||
|
if (!LODOP) {
|
||||||
|
if (isLinuxX86)
|
||||||
|
strAlertMessage = strLodop7Install_X86;
|
||||||
|
else if (isLinuxARM)
|
||||||
|
strAlertMessage = strLodop7Install_ARM;
|
||||||
|
else
|
||||||
|
strAlertMessage = strCLodopInstallA + (CLodopIsLocal ? strCLodopInstallB : "");
|
||||||
|
document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
if (isLinuxX86 && LODOP.CVERSION < "7.0.7.5")
|
||||||
|
strAlertMessage = strLodop7Update_X86;
|
||||||
|
else if (isLinuxARM && LODOP.CVERSION < "7.0.7.5")
|
||||||
|
strAlertMessage = strLodop7Update_ARM;
|
||||||
|
else if (CLODOP.CVERSION < "6.5.9.4")
|
||||||
|
strAlertMessage = strCLodopUpdate;
|
||||||
|
|
||||||
|
if (strAlertMessage)
|
||||||
|
document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//==如果页面有Lodop插件就直接使用,否则新建:==
|
||||||
|
if (oOBJECT || oEMBED) {
|
||||||
|
if (isWinIE)
|
||||||
|
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 (isWinIE)
|
||||||
|
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)) {
|
||||||
|
document.body.innerHTML = (isWinIE64 ? strLodop64Install : strLodopInstall) + strInstallOK + document
|
||||||
|
.body.innerHTML;
|
||||||
|
return LODOP;
|
||||||
|
}
|
||||||
|
if (LODOP.VERSION < "6.2.2.6") {
|
||||||
|
document.body.innerHTML = (isWinIE64 ? strLodop64Update : strLodopUpdate) + strInstallOK + document.body
|
||||||
|
.innerHTML;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):=======================
|
||||||
|
// LODOP.SET_LICENSES("超掌柜独有!","DCFF409304DFCEB3E2C644BF96CD0720","","");
|
||||||
|
//===============================================================================
|
||||||
|
return LODOP;
|
||||||
|
} catch (err) {
|
||||||
|
alert("getLodop出错:" + err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default getLodop
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-dialog v-model="centerDialogVisible" title="二维码" width="666" center>
|
||||||
|
<div class="dialog-footer" style="text-align: center">
|
||||||
|
<!-- <qrcode-vue :value="form.url" :size="200" /> -->
|
||||||
|
<div class="qrcodefooter">{{ props.form.article }}</div>
|
||||||
|
<div class="qrcodefooter">{{ props.form.type }}</div>
|
||||||
|
<div class="qrcodefooter">
|
||||||
|
<el-select v-model="rintermodel" placeholder="请选择打印机" @change="changerintermodel">
|
||||||
|
<el-option v-for="item in rintermodeldata" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-button @click="centerDialogVisible = false">关闭</el-button>
|
||||||
|
<el-button type="primary" :disabled="rintermodel ? false : true" @click="Printing"> 打印 </el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { dayjs } from 'element-plus'
|
||||||
|
import { ref, defineProps, defineExpose, defineEmits } from 'vue'
|
||||||
|
import _lodash from 'lodash'
|
||||||
|
import getLodop from './LodopFuncs'
|
||||||
|
const props = defineProps({
|
||||||
|
form: Object,
|
||||||
|
})
|
||||||
|
|
||||||
|
const centerDialogVisible = ref(false) //显示隐藏
|
||||||
|
const rintermodeldata = ref([]) // 获取打印机列表
|
||||||
|
const rintermodel = ref() //打印机类型
|
||||||
|
// 确定打印机类型
|
||||||
|
const changerintermodel = (i: string) => {
|
||||||
|
rintermodel.value = i
|
||||||
|
}
|
||||||
|
const emit = defineEmits(['somethingDone'])
|
||||||
|
// 以下是打印
|
||||||
|
const Printing = () => {
|
||||||
|
let LODOP = getLodop()
|
||||||
|
centerDialogVisible.value = false
|
||||||
|
rintermodeldata.value = [] //清空
|
||||||
|
emit('somethingDone')
|
||||||
|
LODOP.PRINT_INIT('')
|
||||||
|
// 设置打印纸大小D
|
||||||
|
LODOP.SET_PRINT_PAGESIZE(3, 800, '', '')
|
||||||
|
// 二维码控制大小
|
||||||
|
LODOP.ADD_PRINT_BARCODE('', '30px', '150px', '150px', 'QRCode', props.form.url) //打印产品代码条码
|
||||||
|
LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Width ') //设置打印风格，这里是等宽打印
|
||||||
|
LODOP.SET_PRINTER_INDEX(rintermodel.value) //设置默认打印机(这里用的是打印机名称)
|
||||||
|
LODOP.SET_PRINT_STYLE("TextAlign", "Center");
|
||||||
|
// 文字内容
|
||||||
|
LODOP.ADD_PRINT_HTM(
|
||||||
|
'150px',
|
||||||
|
'5px',
|
||||||
|
'100%',
|
||||||
|
'100%',
|
||||||
|
`<div style="width: 100%;font-size: 12px; ">项目分类:${props.form.article}</div>
|
||||||
|
<div style="width: 100%;font-size: 12px; margin-top:6px;">发票类型:${props.form.type}</div>
|
||||||
|
<div style="width: 100%;font-size: 12px; margin-top:6px;">生成时间:${dayjs().format('YYYY-MM-DD HH:mm:ss')}</div>
|
||||||
|
<div style="width: 100%;font-size: 12px; margin-top:6px;">*二维码有效期30天,超过自动失效！</div>
|
||||||
|
<div style="width: 100%;font-size: 14px; margin-top: 15px;">您可以使用微信，扫码开票</div>`
|
||||||
|
)
|
||||||
|
LODOP.SET_LICENSES('', 'DCFF409304DFCEB3E2C644BF96CD0720', '', '')
|
||||||
|
LODOP.PRINT()
|
||||||
|
}
|
||||||
|
const initialization = async () => {
|
||||||
|
rintermodeldata.value = [] //清空
|
||||||
|
let LODOP = getLodop()
|
||||||
|
setTimeout(() => {
|
||||||
|
if (LODOP == null) {
|
||||||
|
alert('请先安装打印控件')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
for (var i = 0; i < LODOP.GET_PRINTER_COUNT(); i++) {
|
||||||
|
let obj: {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
} = {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
}
|
||||||
|
obj.id = LODOP.GET_PRINTER_NAME(i)
|
||||||
|
obj.name = LODOP.GET_PRINTER_NAME(i)
|
||||||
|
// console.log(obj)
|
||||||
|
rintermodeldata.value.push(obj)
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
const centerDialogVisibleshow = () => {
|
||||||
|
centerDialogVisible.value = !centerDialogVisible.value
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
Printing,
|
||||||
|
centerDialogVisibleshow,
|
||||||
|
initialization,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.dialog-footer {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.qrcodefooter {
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -6,8 +6,8 @@ const routes = [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "home",
|
name: "home",
|
||||||
// component: test,
|
component: test,
|
||||||
component: home,
|
// component: home,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/login",
|
path: "/login",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- <el-button @click="chooseSerial">获取串口列表</el-button> -->
|
<!-- <el-button @click="chooseSerial">获取串口列表</el-button> -->
|
||||||
<el-button @click="initWebSocket()">连接ws</el-button>
|
<el-button @click="initWebSocket()">连接ws</el-button>
|
||||||
|
<el-button @click="dakai()"></el-button>
|
||||||
|
<!-- 打印二维码 -->
|
||||||
|
<rintermodelindex ref="rintermodelindexref" :form="form" @somethingDone="handleSomethingDone"></rintermodelindex>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
@ -12,8 +15,24 @@ import { ipcRenderer } from 'electron'
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { useUser } from "@/store/user.js";
|
import { useUser } from "@/store/user.js";
|
||||||
import useStorage from '@/utils/useStorage'
|
import useStorage from '@/utils/useStorage'
|
||||||
|
import rintermodelindex from '@/components/lodop/index.vue'
|
||||||
const store = useUser();
|
const store = useUser();
|
||||||
|
|
||||||
|
const rintermodelindexref = ref()//打印机ref
|
||||||
|
// 打印成功回调
|
||||||
|
const handleSomethingDone = () => {
|
||||||
|
console.log('打印成功回调成功')
|
||||||
|
}
|
||||||
|
const form = ref({
|
||||||
|
article: '1',
|
||||||
|
type: '2',
|
||||||
|
|
||||||
|
})
|
||||||
|
const dakai = () => {
|
||||||
|
rintermodelindexref.value.centerDialogVisibleshow() //打开二维码打印
|
||||||
|
rintermodelindexref.value.initialization()
|
||||||
|
}
|
||||||
|
|
||||||
// 小票打印机列表
|
// 小票打印机列表
|
||||||
const printList = ref([]);
|
const printList = ref([]);
|
||||||
// 标签打印机列表
|
// 标签打印机列表
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue