286 lines
7.8 KiB
TypeScript
286 lines
7.8 KiB
TypeScript
|
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
|
|||
|
|
|
|||
|
|
// 引入后使用示例
|
|||
|
|
hiprint.init();
|
|||
|
|
hiprint.hiwebSocket.setHost("http://localhost:17521");
|
|||
|
|
|
|||
|
|
window.open("hiprint://");
|
|||
|
|
|
|||
|
|
// 配置
|
|||
|
|
const WIDTH = 58; //纸张宽度 mm
|
|||
|
|
const T_WIDTH = 150; //文本宽度 pt
|
|||
|
|
const T_LEFT = 4; //文本左边距 pt
|
|||
|
|
|
|||
|
|
export const print = (data: any) => {
|
|||
|
|
// hiprint对象获取
|
|||
|
|
const list = hiprint.hiwebSocket.getPrinterList();
|
|||
|
|
console.log(list);
|
|||
|
|
|
|||
|
|
// 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
|
|||
|
|
// 想要实现拖拽设计页面,请往下看 '自定义设计'
|
|||
|
|
var hiprintTemplate = new hiprint.PrintTemplate();
|
|||
|
|
|
|||
|
|
// 模板宽度单位是mm ( 1mm ~= 2.84pt ) 其他的宽高单位是pt
|
|||
|
|
var panel = hiprintTemplate.addPrintPanel({
|
|||
|
|
width: WIDTH, // 58mm = 164pt
|
|||
|
|
height: 58,
|
|||
|
|
paperNumberDisabled: true,
|
|||
|
|
topOffset: -1,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//文本
|
|||
|
|
panel.addPrintText({
|
|||
|
|
options: {
|
|||
|
|
width: T_WIDTH,
|
|||
|
|
height: 10,
|
|||
|
|
top: 10,
|
|||
|
|
left: T_LEFT,
|
|||
|
|
title: "hiprint插件手动添加text",
|
|||
|
|
textAlign: "center",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
//长文本
|
|||
|
|
panel.addPrintLongText({
|
|||
|
|
options: {
|
|||
|
|
width: T_WIDTH,
|
|||
|
|
height: 35,
|
|||
|
|
top: 30,
|
|||
|
|
left: T_LEFT,
|
|||
|
|
title: "长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
//长文本
|
|||
|
|
panel.addPrintLongText({
|
|||
|
|
options: {
|
|||
|
|
width: T_WIDTH,
|
|||
|
|
height: 35,
|
|||
|
|
top: 80,
|
|||
|
|
left: T_LEFT,
|
|||
|
|
title:
|
|||
|
|
"长文本：直接打印，需要安装客户端, 直接打印，需要安装客户端, 直接打印，需要安装客户端, 直接打印，需要安装客户端",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
//打印
|
|||
|
|
hiprintTemplate.print({});
|
|||
|
|
//直接打印，需要安装客户端
|
|||
|
|
// hiprintTemplate.print2({});
|
|||
|
|
// 直接打印回调
|
|||
|
|
// 发送任务到打印机成功
|
|||
|
|
hiprintTemplate.on("printSuccess", (e: any) => {
|
|||
|
|
console.log("printSuccess", e);
|
|||
|
|
});
|
|||
|
|
// 发送任务到打印机失败
|
|||
|
|
hiprintTemplate.on("printError", (e: any) => {
|
|||
|
|
console.log("printError", e);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const testPrint = () => {
|
|||
|
|
// hiprint对象获取
|
|||
|
|
const list = hiprint.hiwebSocket.getPrinterList();
|
|||
|
|
console.log(list);
|
|||
|
|
|
|||
|
|
let nowHeight = 0;
|
|||
|
|
let textHeight = 10;
|
|||
|
|
|
|||
|
|
// 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
|
|||
|
|
// 想要实现拖拽设计页面,请往下看 '自定义设计'
|
|||
|
|
var hiprintTemplate = new hiprint.PrintTemplate();
|
|||
|
|
|
|||
|
|
// 模板宽度单位是mm ( 1mm ~= 2.84pt ) 其他的宽高单位是pt
|
|||
|
|
var panel = hiprintTemplate.addPrintPanel({
|
|||
|
|
width: 58, // 58mm = 164pt
|
|||
|
|
height: 145,
|
|||
|
|
paperNumberDisabled: true,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let options = (e: any)=>{
|
|||
|
|
nowHeight+=textHeight;
|
|||
|
|
let opt = {
|
|||
|
|
width: T_WIDTH,
|
|||
|
|
height: textHeight,
|
|||
|
|
top: nowHeight,
|
|||
|
|
left: T_LEFT,
|
|||
|
|
title: '',
|
|||
|
|
}
|
|||
|
|
if(typeof e === 'string') opt.title = e;
|
|||
|
|
else opt = Object.assign(opt, e);
|
|||
|
|
return {
|
|||
|
|
options: opt
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let lineTitle = ()=>{
|
|||
|
|
nowHeight+=textHeight;
|
|||
|
|
let left = Math.floor(T_WIDTH/3) ;
|
|||
|
|
panel.addPrintText({
|
|||
|
|
options: {
|
|||
|
|
width: left,
|
|||
|
|
height: 10,
|
|||
|
|
top: nowHeight,
|
|||
|
|
left: 0,
|
|||
|
|
title: "单价",
|
|||
|
|
textAlign: "center",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
panel.addPrintText({
|
|||
|
|
options: {
|
|||
|
|
width: left,
|
|||
|
|
height: textHeight,
|
|||
|
|
top: nowHeight,
|
|||
|
|
left: left,
|
|||
|
|
title: "数量",
|
|||
|
|
textAlign: "center",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
panel.addPrintText({
|
|||
|
|
options: {
|
|||
|
|
width: left,
|
|||
|
|
height: textHeight,
|
|||
|
|
top: nowHeight,
|
|||
|
|
left: left * 2,
|
|||
|
|
title: "小计",
|
|||
|
|
textAlign: "center",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let lineOptions = (text1: any, text2: any, text3: any)=>{
|
|||
|
|
nowHeight+=textHeight;
|
|||
|
|
let left = Math.floor(T_WIDTH/3) ;
|
|||
|
|
panel.addPrintText({
|
|||
|
|
options: {
|
|||
|
|
width: left,
|
|||
|
|
height: 10,
|
|||
|
|
top: nowHeight,
|
|||
|
|
left: 0,
|
|||
|
|
title: text1+"",
|
|||
|
|
textAlign: "center",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
panel.addPrintText({
|
|||
|
|
options: {
|
|||
|
|
width: left,
|
|||
|
|
height: textHeight,
|
|||
|
|
top: nowHeight,
|
|||
|
|
left: left,
|
|||
|
|
title: text2+"",
|
|||
|
|
textAlign: "center",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
panel.addPrintText({
|
|||
|
|
options: {
|
|||
|
|
width: left,
|
|||
|
|
height: textHeight,
|
|||
|
|
top: nowHeight,
|
|||
|
|
left: left * 2,
|
|||
|
|
title: text3+"",
|
|||
|
|
textAlign: "center",
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//文本 *1
|
|||
|
|
panel.addPrintText(options({
|
|||
|
|
title: '泸优采-小票0',
|
|||
|
|
textAlign: "center",
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
//文本 *6
|
|||
|
|
panel.addPrintText(options("单号: PF171617436315965155"));
|
|||
|
|
panel.addPrintText(options("配送时间: 2024-05-20 11:06:03"));
|
|||
|
|
panel.addPrintText(options("配送员: 二狗"));
|
|||
|
|
panel.addPrintText(options("配送电话: 19330904744"));
|
|||
|
|
panel.addPrintText(options("======================"));
|
|||
|
|
panel.addPrintText(options("商品信息: "));
|
|||
|
|
|
|||
|
|
//格式化 *1 + 2*3
|
|||
|
|
lineTitle();
|
|||
|
|
panel.addPrintText(options("朝天椒, 辣椒"));
|
|||
|
|
lineOptions("0.01元", "25个", "0.25元");
|
|||
|
|
panel.addPrintText(options("朝天椒, 辣椒"));
|
|||
|
|
lineOptions("0.01元", "25个", "0.25元");
|
|||
|
|
panel.addPrintText(options("朝天椒, 辣椒"));
|
|||
|
|
lineOptions("0.01元", "25个", "0.25元");
|
|||
|
|
|
|||
|
|
//文本 *13
|
|||
|
|
panel.addPrintText(options("======================"));
|
|||
|
|
panel.addPrintText(options('合计: 0.75元'));
|
|||
|
|
|
|||
|
|
panel.addPrintText(options('提货点: 莲花农贸市场'));
|
|||
|
|
panel.addPrintText(options('提货点电话: 19330904744'));
|
|||
|
|
panel.addPrintText(options('提货点负责人签字:'));
|
|||
|
|
// https://lihai001.oss-cn-chengdu.aliyuncs.com/def/db264202405221455038529.png //无字
|
|||
|
|
// https://lihai001.oss-cn-chengdu.aliyuncs.com/def/54705202405221504133485.png //有字
|
|||
|
|
// panel.addPrintRect({ options: { width: T_WIDTH, height:30,top: nowHeight + 15, left: T_LEFT,borderColor:'',borderWidth:0.75 } });
|
|||
|
|
// nowHeight+=40;
|
|||
|
|
panel.addPrintImage({
|
|||
|
|
options: {
|
|||
|
|
width: T_WIDTH,
|
|||
|
|
height:50,
|
|||
|
|
top: nowHeight + 15,
|
|||
|
|
left: T_LEFT,
|
|||
|
|
title: '',
|
|||
|
|
src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/db264202405221455038529.png'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
nowHeight+=60;
|
|||
|
|
panel.addPrintText(options('收货人: 阿哈'));
|
|||
|
|
panel.addPrintText(options('收货地址: 里海科技'));
|
|||
|
|
panel.addPrintText(options('联系电话: 17685151643'));
|
|||
|
|
panel.addPrintText(options('收货人签字:'));
|
|||
|
|
// panel.addPrintRect({ options: { width: T_WIDTH, height:30,top: nowHeight+15, left: T_LEFT,borderColor:'',borderWidth:0.75 } });
|
|||
|
|
panel.addPrintImage({
|
|||
|
|
options: {
|
|||
|
|
width: T_WIDTH,
|
|||
|
|
height: 50,
|
|||
|
|
top: nowHeight + 15,
|
|||
|
|
left: T_LEFT,
|
|||
|
|
title: '',
|
|||
|
|
src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/db264202405221455038529.png'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
nowHeight+=60;
|
|||
|
|
|
|||
|
|
panel.addPrintText(options(""));
|
|||
|
|
panel.addPrintText(options(""));
|
|||
|
|
panel.addPrintText(options(""));
|
|||
|
|
panel.addPrintText(options("======================"));
|
|||
|
|
|
|||
|
|
// 合计高度 23 + length * 2
|
|||
|
|
|
|||
|
|
|
|||
|
|
//打印
|
|||
|
|
// hiprintTemplate.print({});
|
|||
|
|
//直接打印，需要安装客户端
|
|||
|
|
hiprintTemplate.print2({});
|
|||
|
|
// 直接打印回调
|
|||
|
|
// 发送任务到打印机成功
|
|||
|
|
hiprintTemplate.on("printSuccess", (e: any) => {
|
|||
|
|
console.log("printSuccess", e);
|
|||
|
|
});
|
|||
|
|
// 发送任务到打印机失败
|
|||
|
|
hiprintTemplate.on("printError", (e: any) => {
|
|||
|
|
console.log("printError", e);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 计算字符串长度
|
|||
|
|
function calculateStringLength(str: string) {
|
|||
|
|
let count = 0;
|
|||
|
|
for (let i = 0; i < str.length; i++) {
|
|||
|
|
const charCode = str.charCodeAt(i);
|
|||
|
|
// 检查字符是否在汉字的Unicode范围内（注意这也会包括日韩文字等，更精确的检查可能需要更复杂的逻辑）
|
|||
|
|
if (
|
|||
|
|
(charCode >= 0x4e00 && charCode <= 0x9fff) ||
|
|||
|
|
(charCode >= 0x3400 && charCode <= 0x4dff) ||
|
|||
|
|
(charCode >= 0x20000 && charCode <= 0x2ffff)
|
|||
|
|
) {
|
|||
|
|
count += 2; // 汉字算2个字符
|
|||
|
|
} else {
|
|||
|
|
count += 1; // 其他字符算1个字符
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return count;
|
|||
|
|
}
|