633 lines
16 KiB
Vue
633 lines
16 KiB
Vue
<template>
|
||
<div>
|
||
<div style="display: flex;flex-wrap: wrap;justify-content: space-evenly;">
|
||
<button type="primary" @click="openDev" style="width:100px;height:50px;" :disabled="isOpen == true">连接打印机</button>
|
||
<button type="primary" @click="closeConnect" style="width:100px;height:50px;" :disabled="isOpen == false">关闭连接</button>
|
||
<button type="primary" @click="getPrinterStatus" style="width:100px;height:50px;" :disabled="isOpen == false">获取状态</button>
|
||
<button type="primary" @click="printText" style="width:100px;height:50px;" :disabled="isOpen == false">文字打印</button>
|
||
<button type="primary" @click="printBarCode" style="width:100px;height:50px;" :disabled="isOpen == false">打印条码</button>
|
||
<button type="primary" @click="searchGap" style="width:100px;height:50px;" :disabled="isOpen == false">标签对齐</button>
|
||
<button type="primary" @click="printTable" style="width:100px;height:50px;" :disabled="isOpen == false">打印表格</button>
|
||
<button type="primary" @click="setSensitivity" style="width:100px;height:50px;" :disabled="isOpen == false">灵敏度</button>
|
||
<button type="primary" @click="printSelfCheck" style="width:100px;height:50px;" :disabled="isOpen == false">打印自检页</button>
|
||
<button type="primary" @click="setPaperFeed" style="width:100px;height:50px;" :disabled="isOpen == false">走纸</button>
|
||
<button type="primary" @click="setPaperBack" style="width:100px;height:50px;" :disabled="isOpen == false">退纸</button>
|
||
<button type="primary" @click="setDensity" style="width:100px;height:50px;" :disabled="isOpen == false">浓度设置</button>
|
||
<button type="primary" @click="setPaperType(0)" style="width:100px;height:50px;" :disabled="isOpen == false">设置热敏纸</button>
|
||
<button type="primary" @click="setPaperType(1)" style="width:100px;height:50px;" :disabled="isOpen == false">设置标签纸</button>
|
||
<button type="primary" @click="sendBytesData" style="width:100px;height:50px;" :disabled="isOpen == false">发送测试</button>
|
||
<button type="primary" @click="read" style="width:100px;height:50px;" :disabled="isOpen == false">读取测试</button>
|
||
<button type="primary" @click="setFlowMode" style="width:100px;height:50px;" :disabled="isOpen == false">打开流控开关</button>
|
||
<button type="primary" style="width:100px;height:50px;opacity: 0;">占位</button>
|
||
</div>
|
||
|
||
<canvas canvas-id="myCanvas" style="width: 340px;height: 240px;"></canvas>
|
||
|
||
<div style="height:50px;width:100px;">
|
||
<button type="primary" @click="printImg" style="width:300px;height:50px;" :disabled="isOpen == false">打印图片</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { onLoad, onReady } from '@dcloudio/uni-app';
|
||
var printSDK = uni.requireNativePlugin("PrintSDK");
|
||
import QRCode from '@/static/uqrcode.es.js'; // 确保引入qrcode.js
|
||
|
||
// 响应式数据
|
||
const isOpen = ref(false);
|
||
|
||
// 画布相关
|
||
let canvasContext = null;
|
||
|
||
// 生命周期钩子 - 组件加载时
|
||
onLoad(() => {
|
||
// 调用同步方法初始化程序和uhf
|
||
/* console.log("开始初始化")
|
||
uni.showToast({
|
||
title: "开始初始化",
|
||
icon: "none",
|
||
});
|
||
var ret = printSDK.initUHF()
|
||
var initResult = ret.code == "0"? '初始化成功':'初始化失败';
|
||
uni.showToast({
|
||
title: initResult,
|
||
icon: "none",
|
||
}); */
|
||
});
|
||
|
||
// 生命周期钩子 - 组件DOM已更新
|
||
onReady(() => {
|
||
drawCanvas();
|
||
});
|
||
|
||
// 生命周期钩子 - 组件挂载后
|
||
onMounted(() => {
|
||
// 注册全局事件监听
|
||
plus.globalEvent.addEventListener('sendMessage', function(e) {
|
||
if (e.tag == "getPrinterStatus") {
|
||
// 打印机状态返回值
|
||
uni.showToast({
|
||
title: "sendMessage收到：" + JSON.stringify(e.msg),
|
||
icon: "none",
|
||
});
|
||
} else if (e.tag == "initPrint") {
|
||
// 连接和关闭打印机时返回的信息
|
||
uni.showToast({
|
||
title: "sendMessage收到：" + JSON.stringify(e.msg),
|
||
icon: "none",
|
||
});
|
||
} else if (e.tag = "read") {
|
||
// read函数返回的读取到的打印机信息的函数
|
||
uni.showToast({
|
||
title: "sendMessage收到：" + JSON.stringify(e.msg),
|
||
icon: "none",
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
// 绘制画布表格+二维码
|
||
const drawCanvas = () => {
|
||
canvasContext = uni.createCanvasContext('myCanvas');
|
||
console.log(canvasContext)
|
||
canvasContext.fillStyle = 'white'; // 设置填充颜色为红色
|
||
canvasContext.fillRect(0, 0, 340, 240); // 填充整个画板
|
||
drawTable(canvasContext);
|
||
drawText(canvasContext);
|
||
drawQRCode(canvasContext);
|
||
canvasContext.draw(true); // 异步绘制，false表示绘制完成后不返回绘图结果
|
||
};
|
||
|
||
// 绘制文本
|
||
const drawText = (ctx) => {
|
||
ctx.setFontSize(25);
|
||
ctx.fillText('绘制测试页XX公司', 70, 40);
|
||
};
|
||
|
||
// 绘制二维码
|
||
const drawQRCode = (ctx) => {
|
||
// 使用uQRCode.js生成二维码
|
||
var qr = new QRCode('myCanvas', {
|
||
width: 70,
|
||
height: 70,
|
||
colorDark: "#000000",
|
||
colorLight: "#ffffff"
|
||
});
|
||
qr.data = "123";
|
||
qr.size = 70;
|
||
qr.make();
|
||
qr.canvasContext = ctx;
|
||
|
||
ctx.save();
|
||
// 平移画布到 (245, 115) 位置
|
||
ctx.translate(245, 115);
|
||
// 在平移后的位置绘制二维码
|
||
qr.drawCanvas();
|
||
// 恢复之前保存的画布上下文
|
||
ctx.restore();
|
||
};
|
||
|
||
// 绘制表格
|
||
const drawTable = (ctx) => {
|
||
// 绘制表格数据
|
||
ctx.moveTo(10, 1);
|
||
ctx.lineTo(320, 1);
|
||
ctx.moveTo(10, 70);
|
||
ctx.lineTo(320, 70);
|
||
ctx.setFontSize(20);
|
||
ctx.setFillStyle('#000000');
|
||
ctx.fillText('物料编号: 134588788-1', 20, 100);
|
||
ctx.moveTo(10, 110)
|
||
ctx.lineTo(320, 110);
|
||
ctx.fillText('物料名称: 连接杆', 20, 140);
|
||
ctx.moveTo(10, 150)
|
||
ctx.lineTo(240, 150);
|
||
|
||
ctx.moveTo(240, 110);
|
||
ctx.lineTo(240, 190);
|
||
|
||
ctx.fillText('批次: H28228618', 20, 180);
|
||
ctx.moveTo(10, 190)
|
||
ctx.lineTo(320, 190);
|
||
ctx.fillText('数量(QTY): 1', 20, 220);
|
||
ctx.moveTo(10, 230)
|
||
ctx.lineTo(320, 230);
|
||
ctx.setFontSize(25);
|
||
// ctx.fillText('标记问题件', 100, 275);
|
||
// ctx.moveTo(10, 285)
|
||
// ctx.lineTo(320, 285);
|
||
|
||
// 左边外边框
|
||
ctx.moveTo(10, 0)
|
||
ctx.lineTo(10, 230);
|
||
// 右边外边框
|
||
ctx.moveTo(320, 0)
|
||
ctx.lineTo(320, 230);
|
||
ctx.setStrokeStyle('red')
|
||
ctx.stroke()
|
||
};
|
||
|
||
// 流控开关
|
||
const setFlowMode = () => {
|
||
let a = printSDK.sendBytesData("1F111F2C371F1F")
|
||
console.log(a)
|
||
uni.showToast({
|
||
title: "流控开关已打开",
|
||
icon: "none",
|
||
});
|
||
};
|
||
|
||
// 连接打印机
|
||
const openDev = () => {
|
||
console.log("ret", printSDK);
|
||
var ret = printSDK.connectPrinter()
|
||
var openResult = ret.code == "0" ? '连接成功' : '连接失败';
|
||
if (ret.code == "0") {
|
||
isOpen.value = true
|
||
}
|
||
uni.showToast({
|
||
title: openResult,
|
||
icon: "none",
|
||
});
|
||
var ret = printSDK.initPrint();
|
||
if (ret.code != '0') {
|
||
uni.showToast({
|
||
title: "打印机初始化失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 下电
|
||
const closeConnect = () => {
|
||
var ret = printSDK.closeConnect()
|
||
var closeResult = ret.code == "0" ? '成功' : '失败';
|
||
if (ret.code == "0") {
|
||
isOpen.value = false
|
||
}
|
||
uni.showToast({
|
||
title: closeResult,
|
||
icon: "none",
|
||
});
|
||
};
|
||
|
||
// 打印文字测试
|
||
const printText = () => {
|
||
var ret = printSDK.initPrint();
|
||
if (ret.code != '0') {
|
||
uni.showToast({
|
||
title: "打印机初始化失败",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
printSDK.setFont(0, 1, 1, 0, 0);
|
||
printSDK.setPrinter(2, 1);
|
||
var ret = printSDK.printText("打印文字测试\r\n");
|
||
if (ret.code != '0') {
|
||
uni.showToast({
|
||
title: "函数执行失败",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "函数执行成功",
|
||
icon: "none",
|
||
});
|
||
printSDK.setFont(0, 0, 0, 0, 0);
|
||
printSDK.setPrinter(2, 0);
|
||
var ret = printSDK.printText("打印文字测试\r\n");
|
||
}
|
||
}
|
||
};
|
||
|
||
const printBarCode = () => {
|
||
var ret = printSDK.initPrint();
|
||
if (ret.code != '0') {
|
||
uni.showToast({
|
||
title: "打印机初始化失败",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
var type = [73, 4, 6, 5, 72, 3, 102]
|
||
for (var i = 0; i < type.length; i++) {
|
||
printSDK.setPrinter(1, 2);
|
||
if (type[i] == 102) {
|
||
var ret = printSDK.printBarCode(type[i], 2, 3, 6, "123456");
|
||
} else {
|
||
var ret = printSDK.printBarCode(type[i], 2, 162, 2, "0123456789");
|
||
}
|
||
printSDK.setPrinter(1, 3);
|
||
printSDK.setPrinter(2, 0);
|
||
if (ret.code == '0') {
|
||
uni.showToast({
|
||
title: "函数执行失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
// 保存图片并打印
|
||
const saveImage = (picData) => {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: picData,
|
||
success(result) {
|
||
uni.showToast({
|
||
title: "开始打印图片",
|
||
icon: "none",
|
||
});
|
||
var destPic = result.file;
|
||
|
||
var ret = printSDK.initPrint();
|
||
if (ret.code != '0') {
|
||
uni.showToast({
|
||
title: "打印机初始化失败",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
printSDK.printText("\n");
|
||
printSDK.setPrinter(1, 1);
|
||
var path = result.path;
|
||
getImageSize(path);
|
||
uni.showToast({
|
||
title: "打印路径：" + path,
|
||
icon: "none",
|
||
});
|
||
console.log(path);
|
||
ret = printSDK.printImage(result.file, 3, 0, false);
|
||
// printSDK.setPaperFeed(50)
|
||
if (ret.code == "0") {
|
||
uni.showToast({
|
||
title: "函数执行成功",
|
||
icon: "none",
|
||
});
|
||
printSDK.searchGap()
|
||
} else {
|
||
uni.showToast({
|
||
title: "函数执行失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
}
|
||
},
|
||
fail() {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
content: '检测到您没打开获取信息功能权限，是否去设置打开？',
|
||
confirmText: "确认",
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.openSetting({
|
||
success: (res) => {
|
||
console.log(res);
|
||
uni.showToast({
|
||
title: "请重新打印图片",
|
||
icon: "none"
|
||
});
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: "保存失败，请打开权限功能重试",
|
||
icon: "none"
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
};
|
||
|
||
// 获取图片尺寸
|
||
const getImageSize = (filePath) => {
|
||
// 使用 uni.getImageInfo 获取图片的元数据，包括尺寸信息
|
||
uni.getImageInfo({
|
||
src: filePath,
|
||
success: (imageInfo) => {
|
||
console.log('图片宽度:', imageInfo.width);
|
||
console.log('图片高度:', imageInfo.height);
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取图片信息失败', err);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 打印图片
|
||
const printImg = () => {
|
||
for (let index = 0; index < 5; index++) {
|
||
printSDK.setPaperBack(2)
|
||
}
|
||
// uni.showToast({
|
||
// title: "函数执行成功",
|
||
// icon: "none",
|
||
// });
|
||
// canvas保存成临时图片
|
||
uni.canvasToTempFilePath({
|
||
width: 350,
|
||
height: 600,
|
||
canvasId: 'myCanvas',
|
||
success: function(res) {
|
||
console.log(res.tempFilePath)
|
||
var picData = res.tempFilePath
|
||
// 后台直接打印图片
|
||
saveImage(picData);
|
||
}
|
||
})
|
||
};
|
||
|
||
// 打印表格
|
||
const printTable = () => {
|
||
var column = "品名;数量;单价;金额";
|
||
var regularExpression = ";";
|
||
var columnWidth = "14,6,6,6"; //逗号分隔字符串，不要调整格式，逗号和数字之间不要加空格！！！！！！！！！！！！！！
|
||
var rows = ["保鲜袋;10.00;1;10.00", "铁丝挂钩;5.00;2;10.00", "雨伞;5.00;3;15.00"];
|
||
var ret = printSDK.printTable(column, regularExpression, columnWidth, rows);
|
||
if (ret.code == "0") {
|
||
uni.showToast({
|
||
title: "函数执行成功!",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 打印自检页
|
||
const printSelfCheck = () => {
|
||
var ret = printSDK.printSelfCheck();
|
||
if (ret.code == "0") {
|
||
uni.showToast({
|
||
title: "函数执行成功",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 走纸
|
||
const setPaperFeed = () => {
|
||
var ret = printSDK.setPaperFeed(2);
|
||
if (ret.code == "0") {
|
||
uni.showToast({
|
||
title: "函数执行成功",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 退纸
|
||
const setPaperBack = () => {
|
||
var ret = printSDK.setPaperBack(2);
|
||
if (ret.code == "0") {
|
||
uni.showToast({
|
||
title: "函数执行成功",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 获取打印机状态
|
||
const getPrinterStatus = () => {
|
||
var ret = printSDK.getPrinterStatus();
|
||
if (ret.code == "0") {
|
||
uni.showToast({
|
||
title: "正常",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: ret.code,
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 标签对齐
|
||
const searchGap = () => {
|
||
var ret = printSDK.searchGap();
|
||
if (ret.code == "0") {
|
||
uni.showToast({
|
||
title: "函数执行成功",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 设置灵敏度
|
||
const setSensitivity = () => {
|
||
var ret = printSDK.setSensitivity(10);
|
||
if (ret.code == "0") {
|
||
uni.showToast({
|
||
title: "函数执行成功",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 设置浓度
|
||
const setDensity = () => {
|
||
var ret = printSDK.setDensity(0);
|
||
if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: ret.code,
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 设置纸张类型
|
||
const setPaperType = (type) => {
|
||
var ret = printSDK.setPaperType(type)
|
||
if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: ret.code,
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 发送测试
|
||
const sendBytesData = () => {
|
||
var ret = printSDK.sendBytesData("1b3300")
|
||
if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: ret.code,
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 读取测试
|
||
const read = () => {
|
||
var ret = printSDK.read()
|
||
if (ret.code == "-999") {
|
||
uni.showToast({
|
||
title: "打印机未连接",
|
||
icon: "none",
|
||
});
|
||
} else if (ret.code == "999") {
|
||
uni.showToast({
|
||
title: "打印机未初始化",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: ret.code,
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
uni-button{
|
||
margin: 0;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
canvas {
|
||
/* border: 1px solid #000; */
|
||
}
|
||
</style> |