关于此插件
vue-plugin-hiprint(基于hiprint 2.5.4) 当时只是为了方便我(并非hiprint原作者) 在vue项目中引入使用,所以以此命名。
此插件仅仅是一个JavaScript【工具库】而非 Vue【组件库】,所以它默认是不包含demo中所见的那些组件页面的(demo代码随便复制修改拿去用)。
由于hiprint官网最后一次更新时间为2019年【hiprint 2.5.4 是 LGPL 协议】,后在诸多使用者及反馈下进行了许多优化调整。更新日志(同时感谢各位群友支持和参与)
vue-plugin-hiprint 更新日志
hiprint for Vue2.x / Vue3.x (基于jQuery, 理论上应该也是支持其他框架的)
jQuery/uniapp 项目 见下方 [jQuery/uniapp 项目使用](#jQuery/uniapp 项目使用)
注意事项!!
快速链接
Demo预览:https://ccsimple.gitee.io/vue-plugin-hiprint/
更新记录:npm包版本及更新记录
打印客户端:https://gitee.com/CcSimple/electron-hiprint
文章链接
入门篇: 【vue-plugin-hiprint】使用-入门篇
进阶篇: 【vue-plugin-hiprint】使用-进阶篇
provider: 【vue-plugin-hiprint】如何自定义可拖拽元素 provider
打印篇: 【vue-plugin-hiprint】使用-打印篇
参数篇: 【vue-plugin-hiprint】使用-参数篇
实战动态provider: 【vue-plugin-hiprint】实战-动态provider
实战动态模板: 【vue-plugin-hiprint】实战-动态模板
常见问题汇总①: 【vue-plugin-hiprint】常见问题汇总①
常见问题汇总②: 【vue-plugin-hiprint】常见问题汇总②
常见问题汇总③: 【vue-plugin-hiprint】常见问题汇总③
更多参数的文档请仔细查阅文档
hiprint官方文档:http://hiprint.io/docs/start
本人写的部分文档: https://ccsimple.gitee.io/sv-print-docs/config/hiprint.html
安装使用
npm install vue-plugin-hiprint
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">
项目截图
拖拽设计使用
import {hiprint,defaultElementTypeProvider} from 'vue-plugin-hiprint'
hiprint.init({
providers: [new defaultElementTypeProvider()]
})
hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
hiprintTemplate = new hiprint.PrintTemplate({
template: {},
settingContainer: '#PrintElementOptionSetting',
paginationContainer: '.hiprint-printPagination',
onImageChooseClick: (target) => {
setTimeout(() => {
target.refresh("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAIIAQMAAAB99EudAAAABlBMVEUmf8vG2O41LStnAAABD0lEQVR42u3XQQqCQBSAYcWFS4/QUTpaHa2jdISWLUJjjMpclJoPGvq+1WsYfiJCZ4oCAAAAAAAAAAAAAAAAAHin6pL9c6H/fOzHbRrP0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0u/SY9LS0tLS0tLS0tLS0n+edm+UlpaWlpaWlpaWlpaW/tl0Ndyzbno7/+tPTJdd1wal69dNa6abx+Lq6TSeYtK7BX/Diek0XULSZZrakPRtV0i6Hu/KIt30q4fM0pvBqvR9mvsQkZaW9gyJT+f5lsnzjR54xAk8mAUeJyMPwYFH98ALx5Jr0kRLLndT7b64UX9QR/0eAAAAAAAAAAAAAAAAAAD/4gpryzr/bja4QgAAAABJRU5ErkJggg==",{
real: true
})
}, 3000)
},
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'},
],
dataMode: 1,
history: true,
onDataChanged: (type, json) => {
console.log(type);
console.log(json);
},
onUpdateError: (e) => {
console.log(e);
},
});
hiprintTemplate.design('#hiprint-printTemplate');
代码模式使用
import {hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
hiprint.init();
var hiprintTemplate = new hiprint.PrintTemplate();
var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });
panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本:hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });
hiprintTemplate.print({});
i18n 设置
原生为简体中文,英语、德语、西班牙语、法语、意大利语、日语、俄语、繁体中文皆为 AI 机翻,欢迎帮助 订正。
可在 init 时传入语言进行设置,默认为 cn
。
hiprint.init({
lang: 'en',
});
直接打印 地址端口 与 Token 设置
hiprint.init({
host: 'http://localhost:17521',
token: 'token',
});
vue/vue3 全局引入
全局引入,方便在任何地方不引入直接调用打印。示例为代码模式 (拖拽设计请往下看)
import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
hiPrintPlugin.disAutoConnect();
this.$pluginName.init();
var hiprintTemplate = new this.$pluginName.PrintTemplate();
var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });
panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本:hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });
panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });
panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } });
panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });
panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });
panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });
hiprintTemplate.print({});
hiprintTemplate.print2({});
jQuery/uniapp 项目使用
uniapp 需要嵌入到 web 浏览器中.(需要支持 window 全局对象环境)
<head>
<link rel="stylesheet" type="text/css" media="print" href="https://unpkg.com/vue-plugin-hiprint@latest/dist/print-lock.css" />
<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>
<script src="https://unpkg.com/socket.io-client@4.5.1/dist/socket.io.min.js"></script>
<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>
<script src="https://unpkg.com/vue-plugin-hiprint@latest/dist/vue-plugin-hiprint.js"></script>
</head>
<body>
<script defer>
console.log('vue-plugin-hiprint')
console.log(window['vue-plugin-hiprint'])
console.log('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>
配套直接打印客户端(win/mac/linux)
如果使用npm包或者本项目,请使用如下样子的直接打印客户端
如果使用npm包或者本项目,请使用如下样子的直接打印客户端
如果使用npm包或者本项目,请使用如下样子的直接打印客户端
本项目需要上面样式的直接打印客户端; 下载地址见下表:
URLScheme hiprint://
安装客户端时请 以管理员身份运行
,才能成功添加 URLScheme
使用:浏览器地址栏输入 hiprint://
并回车
window.open("hiprint://")
this.$alert(`连接【${hiwebSocket.host}】失败!<br>请确保目标服务器已<a href="https://gitee.com/CcSimple/electron-hiprint/releases" target="_blank"> 下载 </a> 并 <a href="hiprint://" target="_blank"> 运行 </a> 打印服务!`, "客户端未连接", {dangerouslyUseHtmlString: true})
this.$error({
title: "客户端未连接",
content: (h) => (
<div>
连接【{hiwebSocket.host}】失败!
<br />
请确保目标服务器已
<a
href="https://gitee.com/CcSimple/electron-hiprint/releases"
target="_blank"
>
下载
</a>
并
<a href="hiprint://" target="_blank">
运行
</a>
打印服务!
</div>
),
});
配套客户端打印一直存在跨域、无法连接局域网其余打印机、跨网段无法连接的问题,所以诞生了这个中转代理服务。在 electron-hiprint
v1.0.0.7 版本中添加了连接中转服务代理的设置,将会在 electron-hiprint
与 node-hiprint-transit
间建立通信,vue-plugin-hiprint
只需连接中转服务就能获取到所有连接中转服务的打印端信息,并且选择任意打印机进行打印。
连接中转服务只需要修改 host, 添加 token
import { hiprint } from 'vue-plugin-hiprint'
hiprint.init({
host: 'https://printjs.cn:17521',
token: 'vue-plugin-hiprint',
});
hiwebSocket.setHost("https://printjs.cn:17521", "vue-plugin-hiprint")
具体使用请转至 node-hiprint-transit
为此你需要作出这些改变:
-
你可以从 hiwebSocket
中获取到 clients
、printerList
,里面都将包含 client
信息
-
print2、ippRequest、ippRequest api options 中需要添加 client
指定客户端
eg:
var clientId = "AlBaUCNs3AIMFPLZAAAh"
var client = hiwebSocket.clients[clientId]
var printer = hiwebSocket.printerList[0]
hiprintTemplate.print2(printData, { client: clientId, printer: client.printerList[n].name, title: 'hiprint测试打印' });
hiprintTemplate.print2(printData, { client: printer.clientId, printer: printer.name, title: 'hiprint测试打印' });
如果你不提供 client 中转服务将抛出一个 error
常见问题
design时怎么修改默认图片?
<!-- 组件内, 显示的图片-->
<style lang="less" scoped>
/deep/ .hiprint-printElement-image-content {
img {
content: url("~@/assets/logo.png");
}
}
</style>
<!-- App.vue 拖拽时显示的图片-->
<!-- 不要 scoped, 拖拽时是添加到 html body内的-->
<style lang="less">
.hiprint-printElement-image-content {
img {
content: url("~@/assets/logo.png");
}
}
</style>
print/print2 打印回调
hiprintTemplate.print(this.printData, {}, {
callback: () => {
console.log('浏览器打印窗口已打开')
}
})
hiprintTemplate.print2(printData, {printer: '打印机名称', title: '打印标题'})
hiprintTemplate.on('printSuccess', function (data) {
console.log('打印完成')
})
hiprintTemplate.on('printError', function (data) {
console.log('打印失败')
})
打印重叠 / 样式问题
hiprintTemplate.print(this.printData, {}, {
styleHandler: () => {
let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">'
css += '<style>.hiprint-printElement-text{color:red !important;}</style>'
return css
}
})
hiprintTemplate.print2(this.printData, {
styleHandler: () => {
let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">'
css += '<style>.hiprint-printElement-text{color:red !important;}</style>'
return css
}
})
修改默认配置 / 显示/隐藏元素设置参数
hiprint.setConfig()
hiprint.setConfig({
movingDistance: 2.5,
text:{
supportOptions: [
{
name: 'styler',
hidden: true
},
{
name: 'formatter',
hidden: true
},
]
}
})
取消自动socket连接 / socket连接报错问题
import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin,'$hiprint', false);
hiPrintPlugin.disAutoConnect();
import {disAutoConnect, autoConnect, hiprint} from 'vue-plugin-hiprint'
disAutoConnect();
autoConnect((status,msg) => {
if (status) {
hiprintTemplate.print2(printData, {printer: '', title: 'hiprint测试打印'});
}
});
参与项目
git clone https://gitee.com/CcSimple/vue-plugin-hiprint.git
// init
cd vue-plugin-hiprint
npm i
// 调试预览
npm run serve
// 打包
npm run build
demo调试(显示打印iframe)
$('#app').css('display','none');
$('#hiwprint_iframe').css('visibility','visible');
$('#hiwprint_iframe').css('width','100%');
$('#hiwprint_iframe').css('height','251.09mm');
$('#app').css('display','block');
$('#hiwprint_iframe').css('visibility','hidden');
交流群
群人数已超过200 请 '加我好友' 备注加群, 邀你进群
捐赠支持, 或者请我喝杯咖啡☕️
如果对您有帮助,请点击右上角⭐Star关注或扫码捐赠,感谢支持开源!
状态/调整/优化 请查看更新记录
本项目使用 开发
分支说明
main: vue2.x + ant1.7.x融合版 及 npm包源代码
npm_demo: vue2.x + ant1.7.x + npm包使用 示例
npm_demo_ele: vue2.x + ElementUi 2.x + npm包使用 示例
npm_demo_v3: vue3.x + vite + npm包(0.0.18)使用 示例
关于如何融合处理
自己融合请查看 vue.config.js 对比 hiprint.bundle.js
webpack.config.js,是npm打包需要处理的
开源使用说明
npm包是基于hiprint官网2.5.4版本基础做的调整及优化;
本人对开源协议理解有限,如有侵权不合理的地方,请联系告知我;
hiprint 开源协议如下:
/**
* jQuery Hiprint 2.5.4
*
* Copyright (c) 2016-2021 www.hinnn.com. All rights reserved.
*
* Licensed under the LGPL or commercial licenses
* To use it on other terms please contact us: hinnn.com@gmail.com
*
*/
关于LGPL协议
LGPL是GPL的一个为主要为类库使用设计的开源协议。和GPL要求任何使用/修改/衍生之GPL类库的的软件必须采用GPL协议不同。
LGPL允许商业软件通过类库引用(link)方式使用LGPL类库而不需要开源商业软件的代码。这使得采用LGPL协议的开源代码可以被商业软件作为类库引用并发布和销售。
但是如果修改LGPL协议的代码或者衍生,则所有修改的代码,涉及修改部分的额外代码和衍生的代码都必须采用LGPL协议。
因此LGPL协议的开源代码很适合作为第三方类库被商业软件引用,但不适合希望以LGPL协议代码为基础,通过修改和衍生的方式做二次开发的商业软件采用。
GPL/LGPL都保障原作者的知识产权,避免有人利用开源代码复制并开发类似的产品。