wxs-pdf-print v1.0.36
关于此插件
wxs-pdf-print(基于vue-plugin-hiprint 0.0.50) 只是为了方便我(并非 vue-plugin-hiprint 原作者) 在 vue 项目中引入使用,所以以此命名。
此插件仅仅是一个JavaScript【工具库】而非 Vue【组件库】,所以它默认是不包含 demo 中所见的那些组件页面的(demo 代码随便复制修改拿去用)。
由于 hiprint 官网最后一次更新时间为 2019 年【hiprint 2.5.4 是 LGPL 协议】,后在诸多使用者及反馈下进行了许多优化调整。详情(同时感谢各位群友支持和参与)
wxs-pdf-print
hiprint for Vue2.x / Vue3.x (基于 jQuery, 理论上应该也是支持其他框架的)
0.0.36 起 已支持 CDN 形式引入 详见 0.0.36 更新记录 > uniapp / jQuery 项目 使用此方式可行
注意事项!!
- 使用直接客户端时,本地开发连接没问题,部署到线上出现跨域无法连接打印客户端问题:
- 线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html
- 线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html
- 线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html
快速链接
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
更多参数的文档请仔细查阅文档
hiprint 官方文档:http://hiprint.io/docs/start
本人写的部分文档: https://ccsimple.gitee.io/sv-print-docs/config/hiprint.html
安装使用
npm install wxs-pdf-print
<!--【必须】在index.html 文件中添加打印所需样式(此cdn可能不稳定):-->
<link
rel="stylesheet"
type="text/css"
media="print"
href="https://cdn.jsdelivr.net/npm/wxs-pdf-print@latest/dist/print-lock.css"
/>
<!-- 可以调整成 相对链接/自有链接, 【重要】名称需要一致 【print-lock.css】-->
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css" />
项目截图
插件全局引入
全局引入,方便在任何地方不引入直接调用打印。示例为代码模式 (拖拽设计请往下看)
// main.js中 引入安装
import { hiPrintPlugin } from 'wxs-pdf-print'
Vue.use(hiPrintPlugin, '$pluginName')
hiPrintPlugin.disAutoConnect() // 取消自动连接直接打印客户端
// 下列代码为示例,不要再 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({})
组件内引入
示例为代码模式 (拖拽设计请往下看)
import {
autoConnect,
disAutoConnect,
hiprint,
defaultElementTypeProvider,
} from 'wxs-pdf-print'
// 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({})
自定义设计 (详情查看 demo 目录)
import { hiprint, defaultElementTypeProvider } from 'wxs-pdf-print'
// 初始化可拖拽的元素
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')
配套直接打印客户端(win/mac/linux)
版本 | 下载地址 |
---|---|
Win64 | 下载(v1.0.6) |
Win32 | 下载(v1.0.6) |
Linux64 (需要桌面系统) | 下载(v1.0.6) |
Linux64 arm64 (需要桌面系统) | 下载(v1.0.6) |
Mac (intel) | 下载(v1.0.6) |
Mac (M1) | 下载(v1.0.6) |
- 线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html
- 线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html
- 线上跨域问题,请升级 https! 说明:https://www.cnblogs.com/daysme/p/15493523.html
常见问题
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.getPrinterList() 获取 其中的 name
hiprintTemplate.print2(printData, { printer: '打印机名称', title: '打印标题' })
hiprintTemplate.on('printSuccess', function (data) {
console.log('打印完成')
})
hiprintTemplate.on('printError', function (data) {
console.log('打印失败')
})
打印重叠 / 样式问题
/**
* 从 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="/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
},
})
修改默认配置 / 显示/隐藏元素设置参数
// 0.0.13, 新增setConfig方法
// 还原配置
hiprint.setConfig()
// 替换配置
hiprint.setConfig({
movingDistance: 2.5,
text: {
supportOptions: [
{
name: 'styler',
hidden: true,
},
{
name: 'formatter',
hidden: true,
},
],
},
})
取消自动 socket 连接 / socket 连接报错问题
/**
* 取消自动连接
*/
// 在main.js中设置
import { hiPrintPlugin } from 'wxs-pdf-print'
Vue.use(hiPrintPlugin, '$hiprint', false)
// hiPrintPlugin 同时提供了 disAutoConnect 方法
hiPrintPlugin.disAutoConnect()
// 在组件中使用 见: demo/design/index.vue
import { disAutoConnect, autoConnect, hiprint } from 'wxs-pdf-print'
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
*/
参与项目
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)
// 快速显示/隐藏 打印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')
状态/调整/优化
截止 2022-06-15, npm 包 0.0.23 版本已调整优化下列功能, 后续版本请查看更新记录
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 项目报错问题元素添加禁止拖拽
panelsnprintElementsmoptions.draggable true、false添加对齐api
hiprintTemplate.setElsAlign表格字段添加聚合功能
表格字段配置 options.columnsntableSummary新增支持操作历史记录
支持 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) |
咳咳..
第一次写插件(webpack 打包这些都不太了解),不合理的地方欢迎指正issues。
简单的修改了下hiprint.bundle.js
引入了相关资源,然后export hiprint,defaultElementTypeProvider
详见源码vue-plugin-hiprint
本项目使用 开发
分支说明
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都保障原作者的知识产权,避免有人利用开源代码复制并开发类似的产品。
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago