代码拉取完成，页面将自动刷新
同步操作将从 IoT-CrazyAnt/vue-plugin-hiprint 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
使用此版本 请更新最新的 print-lock.css
hiprint.init({
lang: 'en', // 设置语言 ['cn', 'en', 'de', 'es', 'fr', 'it', 'ja', 'ru', 'cn_tw']
});
import { hiprint } from 'vue-plugin-hiprint'
hiprint.init({
host: 'https://printjs.cn:17521', // 此处输入服务启动后的地址
token: 'vue-plugin-hiprint', // 用于鉴权的token
});
// or
hiwebSocket.setHost("https://printjs.cn:17521", "vue-plugin-hiprint")
console.log(hiwebSocket.clients, hiwebSocket.printerList)
// 中转服务专有的 api，可获取所有连接中转服务的客户端 v1.0.7
hiprint.getClients()
hiwebSocket.getClients()
详情转至 文档说明
原本你可以通过 hiprint.getAddress 或 hiwebSocket.getAddress 获取客户端的 ip、ipv6、mac、dns、all、interface、vboxnext 信息，但是需要你主动调用方法去获取。
在 v1.0.7 中我们仍然保留该方式，但移除了用处不大的 dns、interface、vboxnext 类型，同时在连接成功后自动返回客户端 clientInfo 信息
// 手动获取方法
hiprint.getClientInfo()
// or
hiwebSocket.getClientInfo()
console.log(hiwebSocket.clientInfo)
{
arch: "x64",
clientUrl: "http://192.168.0.2:17521",
ip: "192.168.0.2",
ipv6: "fe80::13f:eb0f:e426:7c92",
mac: "a1:a2:a3:a4:a5:a6",
machineId: "12c90ff9-b9f4-4178-9099-9dd326b70c2e",
platform: "win32",
printerList: [{
description: "",
displayName: "Microsoft Print to PDF",
isDefault: true,
name: "Microsoft Print to PDF",
options: {,
"printer-location": "",
"printer-make-and-model": "Microsoft Print To PDF",
"system_driverinfo": "Microsoft Print To PDF;10.0.19041.3570 (WinBuild.160101.0800);Microsoft® Windows® Operating System;10.0.19041.3570"
},
status: 0
}, {…}, {…}, {…}, {…}, {…}],
version: "1.0.7",
}
import { hiprint } from 'vue-plugin-hiprint'
hiprint.init({
host: 'https://printjs.cn:17521', // 此处输入服务启动后的地址
token: 'vue-plugin-hiprint', // 用于鉴权的token
});
// or
hiwebSocket.setHost("https://printjs.cn:17521", "vue-plugin-hiprint")
console.log(hiwebSocket.clients, hiwebSocket.printerList)
// 中转服务专有的 api，可获取所有连接中转服务的客户端 v1.0.7
hiprint.getClients()
hiwebSocket.getClients()
详情转至 文档说明
原本你可以通过 hiprint.getAddress 或 hiwebSocket.getAddress 获取客户端的 ip、ipv6、mac、dns、all、interface、vboxnext 信息，但是需要你主动调用方法去获取。
在 v1.0.7 中我们仍然保留该方式，但移除了用处不大的 dns、interface、vboxnext 类型，同时在连接成功后自动返回客户端 clientInfo 信息
// 手动获取方法
hiprint.getClientInfo()
// or
hiwebSocket.getClientInfo()
console.log(hiwebSocket.clientInfo)
{
arch: "x64",
clientUrl: "http://192.168.0.2:17521",
ip: "192.168.0.2",
ipv6: "fe80::13f:eb0f:e426:7c92",
mac: "a1:a2:a3:a4:a5:a6",
machineId: "12c90ff9-b9f4-4178-9099-9dd326b70c2e",
platform: "win32",
printerList: [{
description: "",
displayName: "Microsoft Print to PDF",
isDefault: true,
name: "Microsoft Print to PDF",
options: {,
"printer-location": "",
"printer-make-and-model": "Microsoft Print To PDF",
"system_driverinfo": "Microsoft Print To PDF;10.0.19041.3570 (WinBuild.160101.0800);Microsoft® Windows® Operating System;10.0.19041.3570"
},
status: 0
}, {…}, {…}, {…}, {…}, {…}],
version: "1.0.7",
}
原生为简体中文，英语、德语、西班牙语、法语、意大利语、日语、俄语、繁体中文皆为 AI 机翻，欢迎帮助 订正。
hiprint.init({
lang: 'en', // 设置语言 ['cn', 'en', 'de', 'es', 'fr', 'it', 'ja', 'ru', 'cn_tw']
});
// 无需自定义 token
hiprint.hiwebSocket.setHost('http://localhost:17521',(connected, e) => {
console.log('connected', connected);
console.log('e', e);
})
// 添加自定义 token
hiprint.hiwebSocket.setHost('http://localhost:17521', 'token',(connected, e) => {
console.log('connected', connected);
console.log('e', e);
})
hiprint.init({
providers: [provider.f],
host: 'http://localhost:17521', // 可在此处设置连接地址与端口号
token: 'token' // 可在此处设置连接 token
});
⚠️⚠️⚠️ 破坏性更新 Breaking changes
⚠️ 使用此版本 请更新最新的 print-lock.css
hinnn.event.clear("onSelectPanel");
hinnn.event.on("onSelectPanel", (panel, index, li) => {
console.log("onSelectPanel", panel, index, li);
});
let json = {
panels:[
// 面板设置 水印参数
// 更多参数可查看本项目 src/hiprint/plugins/watermark.js
"watermarkOptions": {
"content": "vue-plugin-hiprint",
"rotate": 25,
"timestamp": true,
"format": "YYYY-MM-DD HH:mm"
},
]
}
hiprint.hiwebSocket.setHost('http://localhost:17521',(connected, e) => {
console.log('connected', connected);
console.log('e', e);
})
let hiprintTemplate = new hiprint.PrintTemplate({
template: {},
settingContainer: '#PrintElementOptionSetting',
paginationContainer: '.hiprint-printPagination',
defaultPanelName: '默认面板名称', // 默认面板名称(当面板没有 name 属性时)
onPanelAddClick: (panel, createPanel) => {
// 修改名称, 可以弹出输入框, 也可以直接修改
panel.name = '新面板' + (panel.index+1);
// 记得 调用 createPanel 创建面板
createPanel(panel);
},
});
hiprint.setConfig({
adsorbMin: 3, //吸附最小距离pt
showAdsorbLine: true, //显示吸附线
adsorbLineMin: 6, //吸附线显示最小距离pt
})
{
options: {
// 分组统计字段
groupFieldsFormatter: function(groupData,options) {
return ["name"];
}
// 分组表头
groupFormatter: function(groupData,options) {
return '<td></td>';
}
// 分组表脚
groupFooterFormatter: function(groupData,options) {
return '<td></td>';
}
}
}
let hiprintTemplate = new hiprint.PrintTemplate({
template: {},
settingContainer: '#PrintElementOptionSetting',
});
hiprintTemplate.design('#id',{ grid: true });
hinnn.toUpperCase('0',10.8) // 十点八
hinnn.toUpperCase('5',10.8) // 人民币壹拾元捌角
hinnn.toUpperCase('7',10.8) // 壹拾元捌角零分
// eg: 自定义渲染进度条样式
function(value,row,index,options) {
return `<progress value='${value}' max="1000"></progress>`;
}
1.fix toPdf options isDownload bug (toPdf 传3个参数时未正常导出pdf问题)
2.fix size-box font-family bug
3.fix 多行表头编辑bug
4.fix table 卡死问题（模板内"多表格"分页问题）
5.fix table tableSummaryTitle(底部聚合标题) 参数bug
⚠️⚠️⚠️ 破坏性更新 Breaking changes
<head>
<!-- 打印样式是必须的，你可以调整成自由链接， 注意名称 print-lock.css -->
<link rel="stylesheet" type="text/css" media="print" href="https://unpkg.com/vue-plugin-hiprint@0.0.36/dist/print-lock.css" />
<!-- 下列使用的都是 unpkg提供的 稳定性未知, 建议下载自行处理 -->
<!-- jquery 必须 -->
<script src="https://unpkg.com/jquery@3.6.1/dist/jquery.js"></script>
<!-- 条形码 -->
<script src="https://unpkg.com/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<!-- 颜色选择器 -->
<script src="https://unpkg.com/@claviska/jquery-minicolors@2.3.6/jquery.minicolors.min.js"></script>
<!-- 直接打印(print2)需要 -->
<script src="https://unpkg.com/socket.io-client@4.5.1/dist/socket.io.min.js"></script>
<!-- toPdf需要 -->
<script src="https://unpkg.com/canvg@3.0.10/lib/umd.js"></script>
<script src="https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.js"></script>
<!-- vue-plugin-hiprint 😃 -->
<script src="https://unpkg.com/vue-plugin-hiprint@0.0.36/dist/vue-plugin-hiprint.js"></script>
</head>
<body>
<!-- 注意 defer -->
<script defer>
console.log('vue-plugin-hiprint')
console.log(window['vue-plugin-hiprint'])
console.log('hiprint')
// hiprint 以注入 全局
console.log(hiprint)
var autoConnect = window['vue-plugin-hiprint'].autoConnect,
disAutoConnect = window['vue-plugin-hiprint'].disAutoConnect,
defaultElementTypeProvider = window['vue-plugin-hiprint'].defaultElementTypeProvider;
</script>
</body>
<head>
<!-- 打印样式是必须的，你可以调整成自由链接， 注意名称 print-lock.css -->
<link rel="stylesheet" type="text/css" media="print" href="https://unpkg.com/vue-plugin-hiprint@0.0.34/dist/print-lock.css" />
<!-- 下列使用的都是 unpkg提供的 稳定性未知, 建议下载自行处理 -->
<!-- jquery 必须 -->
<script src="https://unpkg.com/jquery@3.6.1/dist/jquery.js"></script>
<!-- 条形码 -->
<script src="https://unpkg.com/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<!-- 颜色选择器 -->
<script src="https://unpkg.com/@claviska/jquery-minicolors@2.3.6/jquery.minicolors.min.js"></script>
<!-- 直接打印(print2)需要 -->
<script src="https://unpkg.com/socket.io-client@4.5.1/dist/socket.io.min.js"></script>
<!-- toPdf需要 -->
<script src="https://unpkg.com/browse/canvg@4.0.1/dist/index.cjs"></script>
<script src="https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.js"></script>
<!-- vue-plugin-hiprint 😃 -->
<script src="https://unpkg.com/vue-plugin-hiprint@0.0.34/dist/vue-plugin-hiprint.js"></script>
</head>
hiprintTemplate = new hiprint.PrintTemplate({
onImageChooseClick: (target) => {
// 测试 3秒后修改图片地址值
setTimeout(() => {
// target.refresh(url,options,callback)
// 自定义处理
// target.refresh(url,false,(el,width,height)=>{
// el.options.width = width;
// el.designTarget.css('width', width + "pt");
// el.designTarget.children('.resize-panel').trigger($.Event('click'));
// })
target.refresh("https://portrait.gitee.com/uploads/avatars/user/1800/5400665_CcSimple_1591166830.png!avatar200", {
// auto: true, // 根据图片宽高自动等比(宽>高?width:height)
// width: true, // 按宽调整高
// height: true, // 按高调整宽
real: true // 根据图片实际尺寸调整(转pt)
})
}, 3000)
}
})
hiprint.setConfig({
text: {
tabs: [
// 隐藏部分 (根据已有分组顺序来)
{
name: '测试', options: [
{
name: 'title',
hidden: false
},
{
name: 'field',
hidden: true
},
]
},
],
},
image: {
tabs: [
{
// 整体替换 及当前选项卡 按新参数设定
replace: true,
name: '基本', options: [
{
name: 'field',
hidden: false
},
{
name: 'src',
hidden: false
},
{
name: 'fit',
hidden: false
}
]
},
],
}
});
// 单选时 返回 [e]
let els = hiprintTemplate.getSelectEls();
console.log(els)
// 更新当前选中元素字体为 12pt
hiprintTemplate.updateOption('fontSize', 12);
// 更新当前选中元素字体粗细为 bolder
hiprintTemplate.updateOption('fontWeight', 'bolder');
/**
* 通过IPP 可以调用打印机所提供的功能
* 如：创建打印任务，取消打印任务，通过uri打印文档等等 （需要打印机支持）
* 详见 IPP: https://github.com/williamkapke/ipp
*/
// 不知道打印机 ipp 情况， 可通过 '客户端' 获取一下
const printerList = hiprintTemplate.getPrinterList();
console.log(printerList)
if (!printerList.length) return;
let p = printerList[0];
console.log(p)
// 系统不同， 参数可能不同
let url = p.options['printer-uri-supported'];
// 测试 打印文本
hiprint.ippPrint({
url: url,
// 打印机参数： {version,uri,charset,language}
opt: {},
action: 'Print-Job',
// ipp参数
message: {
"operation-attributes-tag": {
"requesting-user-name": "hiPrint", // 用户名
"job-name": "ipp Test Job", // 任务名
"document-format": "text/plain" // 文档类型
},
// data 需为 Buffer (客户端简单处理了string 转 Buffer), 支持设置 encoding
// data 需为 Buffer (客户端简单处理了string 转 Buffer), 支持设置 encoding
// data 需为 Buffer (客户端简单处理了string 转 Buffer), 支持设置 encoding
// 其他 Uint8Array/ArrayBuffer 默认仅 使用 Buffer.from(data)
// 其他 Uint8Array/ArrayBuffer 默认仅 使用 Buffer.from(data)
// 其他 Uint8Array/ArrayBuffer 默认仅 使用 Buffer.from(data)
// 其他 Uint8Array/ArrayBuffer 默认仅 使用 Buffer.from(data)
data: 'test test test test test test test',
encoding: 'utf-8' // 默认可不传
}
}, (res) => {
// 执行的ipp 任务回调 / 错误回调
console.log(res)
}, (printer) => {
// ipp连接成功 回调 打印机信息
console.log(printer)
})
hiprint.setConfig({
optionItems: [
// 自定义添加一个scale参数 （重写及定义一个已存在的name）
function () {
function t() {
// json模板 options 对应键值
this.name = "scale";
}
return t.prototype.css = function (t, e) { // t: 元素对象， e 参数值
if (t && t.length) {
if (e) return t.css('transform', 'scale(' + e + ')');
}
return null;
}, t.prototype.createTarget = function (t,i,e) { // t: 元素对象，i: 元素options, e: 元素printElementType
return this.target = $('<div class="hiprint-option-item">\n <div class="hiprint-option-item-label">\n 缩放\n </div>\n <div class="hiprint-option-item-field">\n <input type="number" class="auto-submit"/>\n </div>\n </div>'), this.target;
}, t.prototype.getValue = function () {
var t = this.target.find("input").val();
if (t) return parseFloat(t.toString());
}, t.prototype.setValue = function (t) { // t: options 对应键的值
this.target.find("input").val(t);
}, t.prototype.destroy = function () {
this.target.remove();
}, t;
}(),
],
// 添加到 样式 tab 下的 transform 后面
text: {
tabs: [
{
name: '基础', options: []
},
{
name: '样式', options: [
{
name: 'scale',
after: 'transform', // 自定义参数，插入在 transform 之后
hidden: false
},
]
}
]
}
})
// json模板中配置
options: {
qrcodeLevel: 1 // {L:1, M:0, Q:3, H:2}
}
1. fix 不显示表头时，样式问题
2. fix 元素参数(字体、字间距)对宽高大小框的影响
3. fix printerList、address 回调越来越多的问题
4. fix printSuccess、printError 回调越来越多的问题
5. fix 多选元素 拖拽 辅助线 问题
6. 调整优化 宽高大小/坐标位置 样式 (居中)
7. fix 表格列排序样式问题
8. fix 部分参数设置未及时生效问题（左/右/下边框;上/下/右内边距）
hiprintTemplate = new hiprint.PrintTemplate({
...,
// 自定义可选字体（本机已安装字体）
// 或者使用 hiprintTemplate.setFontList([])
// 或元素中 options.fontList: []
fontList: [
{title:'微软雅黑',value:'Microsoft YaHei'},
{title:'黑体',value:'STHeitiSC-Light'},
{title:'思源黑体',value:'SourceHanSansCN-Normal'},
{title:'王羲之书法体',value:'王羲之书法体'},
{title:'宋体',value:'SimSun'},
{title:'华为楷体',value:'STKaiti'},
{title:'cursive',value:'cursive'},
],
详见参数配置
元素多卡顿问题(hinnn.event导致)
始终隐藏元素 重写 .alwaysHide css
position/size-box的样式（层级及元素行高影响问题）
/* 拖拽时元素辅助线 */
.toplineOfPosition, .bottomlineOfPosition {
border: 0;
border-top: 1px dashed rgb(169, 169, 169);
}
.leftlineOfPosition, .rightlineOfPosition {
border: 0;
border-left: 1px dashed rgb(169, 169, 169);
}
hiprint.setConfig({
movingDistance: 2.5,
panel: {
supportOptions: [
{
name: 'firstPaperFooter', // 隐藏 首页页尾
hidden: true
},
{
name: 'evenPaperFooter', // 隐藏 偶数页页尾
hidden: true
},
]
}
})
设置元素 options.showInPage: 'none' 打印时不打印
或在右侧参数 '显示规则' 下列选择 '始终隐藏'
// 连接上客户端时 获取最新打印机列表
hiprint.refreshPrinterList((list)=>{
console.log(list)
})
// 连接上客户端时 获取MAC地址等
/**
* 参数格式：
* 1. 类型（ip、ipv6、mac、dns、all、interface、vboxnet）
* 2. 回调 data => {addr, e} addr: 返回的数据 e:错误信息
* 3. 其他参数 ...args
*/
hiprint.getAddress('mac',(data)=>{
console.log('mac')
console.log(data)
})
options.zIndex: 10 调整元素层级
或在右侧参数 '元素层级' 中输入 10
(原无法返回此fields列表，且需设置在元素的printElementType中)
设置元素字段名 options.fields: [{"text":'id',"field":'id']
字段名将变成下列选择样式， getJson() 将返回此列表
hiprintTemplate = new hiprint.PrintTemplate({
template: panel,
// 图片选择功能
onImageChooseClick: (target) => {
// target.getValue()
// 测试 3秒后修改图片地址值
setTimeout(()=>{
target.refresh("url")
},3000)
},
settingContainer: '#PrintElementOptionSetting',
});
图片元素设置 options.bject-fix: fill|contain|cover|none
或右侧参数 '图片缩放' 下拉选择
text元素修改为barcode/qrcode时调整控制按钮
右下控制点拖动时等比缩放, 按住shift时可自由缩放
从右侧参数栏快速从右往左选择时鼠标移动到design内时框选框的大小问题
vue 插件 发布npm包,方便直接使用Ant Design Vue demo 默认拖拽设计、自定义设计、队列打印优化删除元素功能 支持 backSpace/delete 按键删除优化拖动功能 调整优化 不允许元素拖出窗口 按住ctrl/command允许拖出窗口外优化框选功能 fix 原只能从上往下框选问题支持修改默认直接打印主机 window.hiwebSocket.setHost("xxx:17521")print优化调整 支持设置callback 见demo的preview.vuetable/tableCustom优化调整 支持设置options.fields 双击选择字段,table优化调整 支持设置isEnableInsertColumn/isEnableDeleteColumn等参数，支持插入/删除列table/tableCustom优化调整 支持设置options.tableHeaderRepeat/tableFooterRepeat 表头/表脚显示模式table优化调整 支持设置 不显示表头条形码优化调整 fix 条码格式错误的问题（EAN-13、ITF、UPC等）字段名优化调整 元素的字段名(field) 支持嵌套（eg: a.b.c.d）新增支持不分页(小票打印) 可设置不分页 table、longText处理新增支持复制/粘贴 支持 基本元素的ctrl+c/v(复制/粘贴)新增支持设置是否自动连接客户端 支持 不自动连接'直接打印'客户端新增支持表格设置列显示类型 支持 设置表格列显示图片、二维码、条形码调整优化表格列拖拽列宽限制 fix 设置旋转角度后 拖拽、跳动、辅助线相关问题npm包新增提供Api打印方法 main.js引入时，Vue原型添加print、print2Api，方便直接打印新增支持多选功能 按住ctrl/command 多选元素 键盘/鼠标拖动 移动调整优化元素设置旋转角度问题 fix 设置旋转角度后 拖拽、跳动、辅助线相关问题新增支持元素拖拽旋转 基本元素上新增旋转控制点，拖拽旋转、双击还原调整优化标尺 使用svg替换原图片标尺，让标尺更清晰新增支持放大缩小功能 提供模板新增zoom方法(transform：scale)，放大缩小拖动不乱跳调整优化以支持Vue3.x 调整qrcode.js fix vite项目报错问题元素添加禁止拖拽 panels[n]printElements[m]options.draggable true、false添加对齐api hiprintTemplate.setElsAlign表格字段添加聚合功能 表格字段配置 options.columns[n]tableSummary新增支持操作历史记录 支持ctrl/command+(shift)+z 撤销重做, 并提供hiprintTemplate的undo,redo方法新增坐标位置参数设置 参数面板新增坐标位置参数,支持同步设置XY坐标,并提供coordinateSync设置默认同步与否新增宽高大小参数设置 参数面板新增宽高大小参数,支持同步设置宽高,并提供widthHeightSync设置默认同步与否新增显示元素坐标位置 拖拽时显示XY坐标位置,并支持两种显示默认,设置positionLineMode,坐标显示在辅助线上新增显示元素宽高大小 点击元素时显示宽高大小,支持重新样式(.resize-panel .size-box)新增设置元素距离api 多选元素后设置每个元素的间隔(垂直/水平) hiprintTemplate.setElsSpace(10,true)调整优化table表头 支持动态显示/隐藏表头列, getJson时也返回了所有设置的列新增支持更新拖拽元素api 通过tid获取拖拽元素/更新拖拽元素 hiprint.updateElementType(tid,(e)=>e)新增支持不打印功能 设置元素 showInPage: 'none' 打印时不打印新增刷新获取打印机列表api 连接上客户端时 通过 hiprint.refreshPrinterList 获取最新打印机列表新增获取IP、IPv6、MAC的api 连接上客户端时 通过 hiprint.getAddress('mac',(data)=>{}) 获取MAC地址新增支持设置元素层级 设置元素 zIndex: 10 调整元素层级调整优化元素设置fields问题 设置元素 options.fields: [{"text":'id',"field":'id']; getJson将返回此列表新增支持图片地址选择按钮 new PrintTemplate时 指定 onImageChooseClick: (target) => {target.refresh('url')} 更新图片地址新增支持图片元素设置缩放格式fit object-fix: fill|contain|cover|none新增支持text元素修改为barcode/qrcode时调整控制按钮 右和下控制点 变成 右下控制点(等比缩放)调整优化控制点等比缩放功能 右下控制点拖动时等比缩放, 按住shift时可自由缩放调整优化元素框选功能 从右侧参数栏快速从右往左选择时鼠标移动到design内时框选框的大小问题| setElsAlign 参数说明 | 说明 |
|---|---|
| left | 左对齐 |
| vertical | 居中 |
| right | 右对齐 |
| top | 顶部对齐 |
| horizontal | 垂直居中 |
| bottom | 底部对齐 |
| distributeHor | 横向分散 |
| distributeVer | 纵向分散 |
| tableSummary 参数说明 | 说明 |
|---|---|
| -(缺省或不匹配) | 不聚合 |
| count | 计数 |
| sum | 合计 |
| avg | 平均值 |
| min | 最小值 |
| max | 最大值 |
| setElsSpace 使用示例 | 说明 |
|---|---|
| .setElsSpace(10) | 垂直距离10(pt) |
| .setElsSpace(10,true) | 水平距离10(pt) |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。