vue-plugin-hiprint hiprint官方文档

hiprint for Vue2.x / Vue3.x

分支说明

main： vue2.x + ant1.7.x融合版 及 npm包源代码

npm_demo： vue2.x + ant1.7.x + npm包使用 示例

npm_demo_v3： vue3.x + vite + npm包(0.0.18)使用 示例

配套直接打印客户端(win/mac/linux)

gitee github

如果使用npm包或者本项目,请使用配套的直接打印客户端(兼容官网的js)

演示/截个图咯~

参与/预览 demo

1git clone https://github.com/CcSimple/vue-plugin-hiprint.git
2// or
3git clone https://gitee.com/CcSimple/vue-plugin-hiprint.git
4// init
5cd vue-plugin-hiprint
6npm i
7// 调试预览
8npm run serve
9// 打包
10npm run build

demo调试（显示打印iframe）

1// 快速显示/隐藏 打印iframe  方便调试 ￣□￣｜｜
2// 在浏览器控制台输入：
3// 显示打印页面
4$('#app').css('display','none');
5$('#hiwprint_iframe').css('visibility','visible');
6$('#hiwprint_iframe').css('width','100%');
7$('#hiwprint_iframe').css('height','251.09mm'); // 这里替换个实际高度才能显示完
8// 显示vue页面
9$('#app').css('display','block');
10$('#hiwprint_iframe').css('visibility','hidden');

安装使用

1// 控制台中输入 以安装npm包
2npm install vue-plugin-hiprint
3// 在index.html 文件中添加打印所需样式: 当然你也可以调整成 相对链接/自有链接
4<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">

插件引入

1// main.js中 引入安装
2import {hiPrintPlugin} from 'vue-plugin-hiprint'
3Vue.use(hiPrintPlugin, '$pluginName')
4hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
5// 然后使用
6this.$pluginName
7
8// 引入后使用示例
9this.$pluginName.init();
10var hiprintTemplate = new this.$pluginName.PrintTemplate();
11var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
12//文本
13panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
14//条形码
15panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
16//二维码
17panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });
18//长文本
19panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });
20//表格
21panel.addPrintTable({ options: { width: 252, height: 35, top: 130, left: 20, content: $('#testTable').html() } });
22//Html
23panel.addPrintHtml({ options: { width: 140, height: 35, top: 180, left: 20, content:'' } });
24//竖线//不设置宽度
25panel.addPrintVline({ options: { height: 35, top: 230, left: 20 } });
26//横线 //不设置高度
27panel.addPrintHline({ options: { width: 140, top: 245, left: 120 } });
28//矩形
29panel.addPrintRect({ options: { width: 35, height: 35, top: 230, left: 60 } });
30//打印
31hiprintTemplate.print({});
32//直接打印，需要安装客户端
33hiprintTemplate.print2({});

组件引入

1import {autoConnect, disAutoConnect, hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
2// autoConnect(); // 默认 自动连接直接打印客户端
3disAutoConnect(); // 取消自动连接直接打印客户端
4
5// 引入后使用示例
6hiprint.init();
7var hiprintTemplate = new hiprint.PrintTemplate();
8var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
9//文本
10panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
11//条形码
12panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
13//二维码
14panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });
15//长文本
16panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });
17//打印
18hiprintTemplate.print({});

自定义设计 （详情查看demo目录）

1import {hiprint,defaultElementTypeProvider} from 'vue-plugin-hiprint'
2hiprint.init({
3  providers: [new defaultElementTypeProvider()]
4})
5hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
6hiprintTemplate = new hiprint.PrintTemplate({
7  template: {},
8  settingContainer: '#PrintElementOptionSetting',
9  paginationContainer: '.hiprint-printPagination'
10});
11hiprintTemplate.design('#hiprint-printTemplate');

常见问题

design时怎么修改默认图片？

1<!-- 组件内, 显示的图片-->
2<style lang="less" scoped>
3/deep/ .hiprint-printElement-image-content {
4  img {
5    content: url("~@/assets/logo.png");
6  }
7}
8</style>
9<!-- App.vue 拖拽时显示的图片-->
10<!-- 不要 scoped, 拖拽时是添加到 html body内的-->
11<style lang="less">
12.hiprint-printElement-image-content {
13  img {
14    content: url("~@/assets/logo.png");
15  }
16}
17</style>

print/print2 打印回调

1// 浏览器预览打印
2hiprintTemplate.print(this.printData, {}, {
3  callback: () => {
4    console.log('浏览器打印窗口已打开')
5  }
6})
7// 直接打印
8hiprintTemplate.print2(printData, {printer: '打印机名称', title: '打印标题'})
9hiprintTemplate.on('printSuccess', function (data) {
10  console.log('打印完成')
11})
12hiprintTemplate.on('printError', function (data) {
13  console.log('打印失败')
14})

打印重叠 / 样式问题

1/**
2 * 从 0.0.19 起, 在index.html添加:
3 * <link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
4 * 以处理打印所需css, 当然你也可以自行处理
5 * 比如： index.html目录下放一个print-lock.css, 然后在index.html添加:
6 * <link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">
7 */
8
9// 添加自定义样式
10hiprintTemplate.print(this.printData, {}, {
11  styleHandler: () => {
12    // 这里拼接成放html->head标签内的css/style
13    // 1.例如：使用hiprin官网的样式
14    let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">'
15    // 2.重写样式：所有文本红色
16    css += '<style>.hiprint-printElement-text{color:red !important;}</style>'
17    return css
18  }
19})
20// 直接打印
21hiprintTemplate.print2(this.printData, {
22  styleHandler: () => {
23    // 这里拼接成放html->head标签内的css/style
24    // 1.例如：使用hiprin官网的样式
25    let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">'
26    // 2.重写样式：所有文本红色
27    css += '<style>.hiprint-printElement-text{color:red !important;}</style>'
28    return css
29  }
30})

修改默认配置 / 显示/隐藏元素设置参数

1// 0.0.13， 新增setConfig方法
2// 还原配置
3hiprint.setConfig()
4// 替换配置
5hiprint.setConfig({
6  movingDistance: 2.5,
7  text:{
8    supportOptions: [
9      {
10        name: 'styler',
11        hidden: true
12      },
13      {
14        name: 'formatter',
15        hidden: true
16      },
17    ]
18  }
19})

取消自动socket连接 / socket连接报错问题

1/**
2 * 取消自动连接
3 */
4// 在main.js中设置
5import {hiPrintPlugin} from 'vue-plugin-hiprint'
6Vue.use(hiPrintPlugin,'$hiprint', false);
7// hiPrintPlugin 同时提供了 disAutoConnect 方法
8hiPrintPlugin.disAutoConnect();
9// 在组件中使用 见： demo/design/index.vue
10import {disAutoConnect, autoConnect, hiprint} from 'vue-plugin-hiprint'
11disAutoConnect();
12// 同时 export了 autoConnect，disAutoConnect 方法
13/**
14 * 连接回调及打印
15 */
16autoConnect((status,msg) => {
17  if (status) {
18    hiprintTemplate.print2(printData, {printer: '', title: 'hiprint测试打印'});
19  }
20});
21/**
22 * socket连接报错？
23 * 由于npm包更新到socket.io 3.x版本，官网提供的客户端，npm包是无法连接的
24 * 请使用gitee提供的客户端, 同时gitee客户端可传更多的参数， 如是否打印颜色/打印份数/DPI等
25 * 详情electron见：https://www.electronjs.org/zh/docs/latest/api/web-contents
26 */

交流群

若过期 加我 备注加群

状态/调整/优化

• vue 插件 发布npm包,方便直接使用
• Ant Design Vue demo 默认拖拽设计、自定义设计、队列打印
• 优化删除元素功能 支持 backSpace/delete 按键删除
• 优化拖动功能 调整优化 不允许元素拖出窗口 按住ctrl/command允许脱出窗口外
• 优化框选功能 fix 原只能从上往下框选问题
• 支持修改默认直接打印主机 window.hiwebSocket.setHost("xxx:17521")
• print优化调整 支持设置callback 见demo的preview.vue
• table/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)

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)

咳咳..

第一次写插件(webpack打包这些都不太了解)，不合理的地方欢迎指正issues。 简单的修改了下hiprint.bundle.js引入了相关资源,然后export hiprint,defaultElementTypeProvider

详见源码vue-plugin-hiprint

关于如何融合处理

自己融合请查看 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都保障原作者的知识产权，避免有人利用开源代码复制并开发类似的产品。