About this plugin
vue-plugin-hiprint (based on hiprint 2.5.4) was just for the convenience of me (not the original author of hiprint) to introduce and use it in the vue project, so it was named after it.
This plugin is just a JavaScript[tool library]rather than a Vue[component library]so it does not include those component pages seen in the demo by default (the demo code can be copied and modified for use).
Since the hiprint official website was last updated in 2019[hiprint 2.5.4 is an LGPL agreement]many optimizations and adjustments have been made after many users and feedback. Details (thank you for your support and participation)
vue-plugin-hiprint
hiprint for Vue2.x / Vue3.x (based on jQuery, theoretically should also support other frameworks)
Since 0.0.36, the introduction of CDN form has been supported. For details, please refer to the 0.0.36 update record uniapp. This method is feasible.
Quick Links
Hiprint official documentation: http://hiprint.io/docs/start
Demo preview: https://ccsimple.gitee.io/vue-plugin-hiprint/
Update record: npm package version and update record
Print client: https://gitee.com/CcSimple/electron-hiprint
installation and use
npm install vue-plugin-hiprint
<!--【必须】在index.html 文件中添加打印所需样式(此cdn可能不稳定):-->
<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
<!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
<link rel="stylesheet" type="text/css" media="print" href="https://gitee.com/print-lock.css">
project screenshot
Plugin global import
// main.js中 引入安装
import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
// 然后使用
this.$pluginName
// 下列代码为示例,不要再 main.js中 使用
// 引入后使用示例
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() } });
//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({});
Introduced in the component
import {autoConnect, disAutoConnect, hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
// autoConnect(); // 默认 自动连接直接打印客户端
disAutoConnect(); // 取消自动连接直接打印客户端
// 引入后使用示例
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({});
Custom design (see demo directory for details)
import {hiprint,defaultElementTypeProvider} from 'vue-plugin-hiprint'
// 初始化可拖拽的元素
hiprint.init({
providers: [new defaultElementTypeProvider()]
})
// $('.ep-draggable-item') 包含 tid, 与上边的 provider 中的 tid 对应 才能正常拖拽生成元素
hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
hiprintTemplate = new hiprint.PrintTemplate({
template: {}, // 模板json
settingContainer: '#PrintElementOptionSetting', // 元素参数容器
paginationContainer: '.hiprint-printPagination', // 多面板的容器, 实现多面板, 需要在添加一个 <div class="hiprint-printPagination"/>
// ------- 下列是可选功能 -------
// ------- 下列是可选功能 -------
// ------- 下列是可选功能 -------
// 图片选择功能
onImageChooseClick: (target) => {
// 测试 3秒后修改图片地址值
setTimeout(() => {
// target.refresh(url,options,callback)
// callback(el, width, height) // 原元素,宽,高
// 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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAIIAQMAAAB99EudAAAABlBMVEUmf8vG2O41LStnAAABD0lEQVR42u3XQQqCQBSAYcWFS4/QUTpaHa2jdISWLUJjjMpclJoPGvq+1WsYfiJCZ4oCAAAAAAAAAAAAAAAAAHin6pL9c6H/fOzHbRrP0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0u/SY9LS0tLS0tLS0tLS0n+edm+UlpaWlpaWlpaWlpaW/tl0Ndyzbno7/+tPTJdd1wal69dNa6abx+Lq6TSeYtK7BX/Diek0XULSZZrakPRtV0i6Hu/KIt30q4fM0pvBqvR9mvsQkZaW9gyJT+f5lsnzjR54xAk8mAUeJyMPwYFH98ALx5Jr0kRLLndT7b64UX9QR/0eAAAAAAAAAAAAAAAAAAD/4gpryzr/bja4QgAAAABJRU5ErkJggg==",{
// auto: true, // 根据图片宽高自动等比(宽>高?width:height)
// width: true, // 按宽调整高
// height: true, // 按高调整宽
real: true // 根据图片实际尺寸调整(转pt)
})
}, 3000)
// target.getValue()
// target.refresh(url)
},
// 自定义可选字体
// 或者使用 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'},
],
dataMode: 1, // 1:getJson 其他:getJsonTid 默认1
history: true, // 是否需要 撤销重做功能
onDataChanged: (type, json) => { // 模板发生改变回调
console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
console.log(json); // 返回 template
},
onUpdateError: (e) => { // 更新失败回调
console.log(e);
},
});
// 设计器的容器
hiprintTemplate.design('#hiprint-printTemplate');
Supporting direct printing client (win/mac/linux)
If you use the npm package or this project, please use the following direct printing client
If you use the npm package or this project, please use the following direct printing client
If you use the npm package or this project, please use the following direct printing client
This project requires the direct printing client of the above style; the download address is shown in the table below:
common problem
How to modify the default picture when designing?
<!-- 组件内, 显示的图片-->
<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 print callback
// 浏览器预览打印
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('打印失败')
})
Print overlap/style issues
/**
* 从 0.0.19 起, 在index.html添加:
* <link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css">
* 以处理打印所需css, 当然你也可以自行处理
* 比如: index.html目录下放一个print-lock.css, 然后在index.html添加:
* <link rel="stylesheet" type="text/css" media="print" href="https://gitee.com/print-lock.css">
*/
// 添加自定义样式
hiprintTemplate.print(this.printData, {}, {
styleHandler: () => {
// 这里拼接成放html->head标签内的css/style
// 1.例如:使用hiprin官网的样式
let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">'
// 2.重写样式:所有文本红色
css += '<style>.hiprint-printElement-text{color:red !important;}</style>'
return css
}
})
// 直接打印
hiprintTemplate.print2(this.printData, {
styleHandler: () => {
// 这里拼接成放html->head标签内的css/style
// 1.例如:使用hiprin官网的样式
let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">'
// 2.重写样式:所有文本红色
css += '<style>.hiprint-printElement-text{color:red !important;}</style>'
return css
}
})
Modify default configuration/show/hide element setting parameters
// 0.0.13, 新增setConfig方法
// 还原配置
hiprint.setConfig()
// 替换配置
hiprint.setConfig({
movingDistance: 2.5,
text:{
supportOptions: [
{
name: 'styler',
hidden: true
},
{
name: 'formatter',
hidden: true
},
]
}
})
Cancel automatic socket connection / socket connection error problem
/**
* 取消自动连接
*/
// 在main.js中设置
import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin,'$hiprint', false);
// hiPrintPlugin 同时提供了 disAutoConnect 方法
hiPrintPlugin.disAutoConnect();
// 在组件中使用 见: demo/design/index.vue
import {disAutoConnect, autoConnect, hiprint} from 'vue-plugin-hiprint'
disAutoConnect();
// 同时 export了 autoConnect,disAutoConnect 方法
/**
* 连接回调及打印
*/
autoConnect((status,msg) => {
if (status) {
hiprintTemplate.print2(printData, {printer: '', title: 'hiprint测试打印'});
}
});
/**
* socket连接报错?
* 由于npm包更新到socket.io 3.x版本,官网提供的客户端,npm包是无法连接的
* 请使用gitee提供的客户端, 同时gitee客户端可传更多的参数, 如是否打印颜色/打印份数/DPI等
* 详情electron见:https://www.electronjs.org/zh/docs/latest/api/web-contents
*/
Participate in the project
git clone https://gitee.com/CcSimple/vue-plugin-hiprint.git
// init
cd vue-plugin-hiprint
npm i
// 调试预览
npm run serve
// 打包
npm run build
demo debugging (display print iframe)
// 快速显示/隐藏 打印iframe 方便调试  ̄□ ̄||
// 在浏览器控制台输入:
// 显示打印页面
$('#app').css('display','none');
$('#hiwprint_iframe').css('visibility','visible');
$('#hiwprint_iframe').css('width','100%');
$('#hiwprint_iframe').css('height','251.09mm'); // 这里替换个实际高度才能显示完
// 显示vue页面
$('#app').css('display','block');
$('#hiwprint_iframe').css('visibility','hidden');
Exchange group
The number of people in the group has exceeded 200, please ‘add me as a friend’ to add the note to the group, and invite you to join the group
Support the project, or invite the author to have a cup of coffee☕️
Status/Tune/Optimize
As of 2022-06-15, npm package version 0.0.23 has adjusted and optimized the following functions, please check the update record for subsequent versions
-
vue 插件
Publish npm package for direct use -
Ant Design Vue demo
Default drag and drop design, custom design, queue printing -
优化删除元素功能
Support backSpace/delete button to delete -
优化拖动功能
Adjustment and optimization do not allow elements to be dragged out of the window and hold down ctrl/command to allow dragging out of the window -
优化框选功能
Fix the problem that the box can only be selected from top to bottom -
支持修改默认直接打印主机
window.hiwebSocket.setHost(“xxx:17521”) -
print优化调整
Support setting callback, see demo’s preview.vue -
table/tableCustom优化调整
Support setting options.fields Double-click to select a field, -
table优化调整
Supports setting isEnableInsertColumn/isEnableDeleteColumn and other parameters, and supports inserting/deleting columns -
table/tableCustom优化调整
Support setting options.tableHeaderRepeat/tableFooterRepeat table header/footer display mode -
table优化调整
Support setting not to display header -
条形码优化调整
fix wrong barcode format (EAN-13, ITF, UPC, etc.) -
字段名优化调整
The element’s field name (field) supports nesting (eg: abcd) -
新增支持不分页(小票打印)
Non-paged table and longText processing can be set -
新增支持复制/粘贴
Support for ctrl+c/v (copy/paste) for basic elements -
新增支持设置是否自动连接客户端
Support for not auto-connecting ‘direct printing’ clients -
新增支持表格设置列显示类型
Support setting table columns to display pictures, QR codes, and barcodes -
调整优化表格列拖拽列宽限制
Fix dragging, jumping, auxiliary line related issues after setting the rotation angle -
npm包新增提供Api打印方法
When main.js is introduced, the Vue prototype adds print and print2Api to facilitate direct printing -
新增支持多选功能
Hold down ctrl/command multiple selection elements keyboard/mouse drag to move -
调整优化元素设置旋转角度问题
Fix dragging, jumping, auxiliary line related issues after setting the rotation angle -
新增支持元素拖拽旋转
Added rotation control points on the basic elements, drag to rotate, double-click to restore -
调整优化标尺
Use svg to replace the original picture ruler to make the ruler clearer -
新增支持放大缩小功能
Provide a new zoom method (transform: scale) in the template, zoom in and out and drag without jumping -
调整优化以支持Vue3.x
Adjust qrcode.js fix vite project error problem -
元素添加禁止拖拽
the panels[n]printElements[m]options.draggable true, false -
添加对齐api
hiprintTemplate.setElsAlign -
表格字段添加聚合功能
Form field configuration options.columns[n]tableSummary -
新增支持操作历史记录
Support ctrl/command+(shift)+z to undo and redo, and provide undo and redo methods of hiprintTemplate -
新增坐标位置参数设置
Added coordinate position parameters in the parameter panel, supports synchronous setting of XY coordinates, and provides coordinateSync to set the default synchronization or not -
新增宽高大小参数设置
Added width and height parameters in the parameter panel, which supports synchronous setting of width and height, and provides widthHeightSync to set the default synchronization or not -
新增显示元素坐标位置
Display the XY coordinate position when dragging, and support two display defaults, set positionLineMode, and coordinates are displayed on the auxiliary line -
新增显示元素宽高大小
Display the width and height when clicking on the element, support restyle (.resize-panel .size-box) -
新增设置元素距离api
Set the interval (vertical/horizontal) of each element after selecting multiple elements hiprintTemplate.setElsSpace(10,true) -
调整优化table表头
Support dynamic display/hide header columns, all set columns are also returned when getJson -
新增支持更新拖拽元素api
Get the drag element by tid/update the drag element hiprint.updateElementType(tid,(e)=>e) -
新增支持不打印功能
Set element showInPage: ‘none’ to not print when printing -
新增刷新获取打印机列表api
Get the latest printer list through hiprint.refreshPrinterList when connected to the client -
新增获取IP、IPv6、MAC的api
Get the MAC address through hiprint.getAddress(‘mac’,(data)=>{}) when connecting to the client -
新增支持设置元素层级
Set element zIndex: 10 to adjust element level -
调整优化元素设置fields问题
Set element options.fields: [{“text”:’id’,”field”:’id’]; getJson will return this list -
新增支持图片地址选择按钮
Specify onImageChooseClick when new PrintTemplate: (target) => {target.refresh(‘url’)} to update the image address -
新增支持图片元素设置缩放格式fit
object-fix: fill|contain|cover|none -
新增支持text元素修改为barcode/qrcode时调整控制按钮
The right and bottom control points become the bottom right control point (proportional scaling) -
调整优化控制点等比缩放功能
When the lower right control point is dragged, it will scale proportionally, and it can be scaled freely when holding shift -
调整优化元素框选功能
When selecting quickly from right to left from the right parameter bar, the size of the marquee box when the mouse moves into the design
setElsAlign parameter description | illustrate |
---|---|
left | align left |
vertical | in the center |
right | right align |
top | align top |
horizontal | Center vertically |
bottom | Bottom alignment |
distributeHor | Horizontal dispersion |
distributeVer | vertical dispersion |
tableSummary parameter description | illustrate |
---|---|
– (default or no match) | not aggregated |
count | count |
sum | total |
avg | average value |
min | minimum value |
max | maximum value |
example of using setElsSpace | illustrate |
---|---|
.setElsSpace(10) | Vertical distance 10(pt) |
.setElsSpace(10,true) | Horizontal distance 10(pt) |
cough cough..
This is the first time to write a plugin (I don’t know much about webpack packaging). Please correct the issues if it is unreasonable.Simply modifiedhiprint.bundle.js
The relevant resources are introduced, and thenexport hiprint,defaultElementTypeProvider
See source code vue-plugin-hiprint for details
This project uses to develop
branch description
main: vue2.x + ant1.7.x fusion version and npm package source code
npm_demo: vue2.x + ant1.7.x + npm package usage example
npm_demo_ele: vue2.x + ElementUi 2.x + npm package usage example
npm_demo_v3: vue3.x + vite + npm package (0.0.18) usage example
About how to fuse
For your own integration, please check vue.config.js vs. hiprint.bundle.js
webpack.config.js, which needs to be processed by npm packaging
Open Source Instructions
The npm package is adjusted and optimized based on version 2.5.4 of hiprint official website;
I have limited understanding of open source agreements, if there is any unreasonable infringement, please contact me;
The hiprint open source agreement is as follows:
/**
* 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
*
*/
About the LGPL agreement
LGPL是GPL的一个为主要为类库使用设计的开源协议。和GPL要求任何使用/修改/衍生之GPL类库的的软件必须采用GPL协议不同。
LGPL允许商业软件通过类库引用(link)方式使用LGPL类库而不需要开源商业软件的代码。这使得采用LGPL协议的开源代码可以被商业软件作为类库引用并发布和销售。
但是如果修改LGPL协议的代码或者衍生,则所有修改的代码,涉及修改部分的额外代码和衍生的代码都必须采用LGPL协议。
因此LGPL协议的开源代码很适合作为第三方类库被商业软件引用,但不适合希望以LGPL协议代码为基础,通过修改和衍生的方式做二次开发的商业软件采用。
GPL/LGPL都保障原作者的知识产权,避免有人利用开源代码复制并开发类似的产品。
#vuepluginhiprint #hiprint #Vue2Vue3 #Print #print #design #visual #designer #report #design #element #editing #visual #print #editing