vue-plugin-hiprint

hiprint for Vue2.x / Vue3.x (基于jQuery, 理论上应该也是支持其他框架的)

本项目使用开发

分支说明

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)使用示例

安装使用

npm install vue-plugin-hiprint

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

Gitee Demo预览

hiprint官方文档

npm包版本及更新记录

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

gitee客户端源码 / 下载  github客户端源码

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

本项目需要上面样式的直接打印客户端; 下载地址见下表:

版本	下载地址
Win64	下载(v1.0.4)
Win32	下载(v1.0.4)
Linux64 (需要桌面系统)	下载(v1.0.4)
Mac (intel)	下载(v1.0.4)
Mac (M1)	下载(v1.0.4)

演示/截个图咯~

插件全局引入

// main.js中 引入安装
import {hiPrintPlugin} from 'vue-plugin-hiprint'
Vue.use(hiPrintPlugin, '$pluginName')
hiPrintPlugin.disAutoConnect(); // 取消自动连接直接打印客户端
// 然后使用
this.$pluginName

// 引入后使用示例
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 '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({});

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

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'
});
hiprintTemplate.design('#hiprint-printTemplate');

常见问题

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('打印失败')
})

打印重叠 / 样式问题

/**
 * 从 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 '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
 */

参与项目

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');

交流群

群人数已超过200 请 '加我好友' 备注加群, 邀你进群

支持一下项目, 或者请作者喝杯咖啡☕️

状态/调整/优化

截止2022-06-15, npm包0.0.23版本已调整优化下列功能, 后续版本请查看更新记录

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: [email protected]
 *
 */

关于LGPL协议

LGPL是GPL的一个为主要为类库使用设计的开源协议。和GPL要求任何使用/修改/衍生之GPL类库的的软件必须采用GPL协议不同。

LGPL允许商业软件通过类库引用(link)方式使用LGPL类库而不需要开源商业软件的代码。这使得采用LGPL协议的开源代码可以被商业软件作为类库引用并发布和销售。

但是如果修改LGPL协议的代码或者衍生，则所有修改的代码，涉及修改部分的额外代码和衍生的代码都必须采用LGPL协议。

因此LGPL协议的开源代码很适合作为第三方类库被商业软件引用，但不适合希望以LGPL协议代码为基础，通过修改和衍生的方式做二次开发的商业软件采用。

GPL/LGPL都保障原作者的知识产权，避免有人利用开源代码复制并开发类似的产品。

Name		Name	Last commit message	Last commit date
Latest commit History 349 Commits
demo		demo
public		public
res		res
src		src
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
vue.config.js		vue.config.js
webpack.config.js		webpack.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

vue-plugin-hiprint

分支说明

安装使用

Gitee Demo预览

hiprint官方文档

npm包版本及更新记录

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

gitee客户端源码 / 下载  github客户端源码

演示/截个图咯~

插件全局引入

组件内引入

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

常见问题

参与项目

demo调试（显示打印iframe）

交流群

支持一下项目, 或者请作者喝杯咖啡☕️

状态/调整/优化

截止2022-06-15, npm包0.0.23版本已调整优化下列功能, 后续版本请查看更新记录

咳咳..

详见源码vue-plugin-hiprint

关于如何融合处理

开源使用说明

关于LGPL协议

About

Releases

Packages

Languages

License

chensce/vue-plugin-hiprint

Folders and files

Latest commit

History

Repository files navigation

vue-plugin-hiprint

分支说明

安装使用

Gitee Demo预览

hiprint官方文档

npm包版本及更新记录

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

gitee客户端源码 / 下载 github客户端源码

演示/截个图咯~

插件全局引入

组件内引入

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

常见问题

参与项目

demo调试（显示打印iframe）

交流群

支持一下项目, 或者请作者喝杯咖啡☕️

状态/调整/优化

截止2022-06-15, npm包0.0.23版本已调整优化下列功能, 后续版本请查看更新记录

咳咳..

详见源码vue-plugin-hiprint

关于如何融合处理

开源使用说明

关于LGPL协议

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

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

Packages