npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@hengliforked/vue-plugin-hiprint

v0.0.57-beta1

Published

hiprint for Vue2.x / Vue3.x 支持拖拽(分页(不分页)、表头表脚、样式设置、复制粘贴、缩放、撤销重做)生成打印模板、导出json模板数据、静默打印/获取MAC地址(借助客户端)

Downloads

1

Readme

image image image image image image image

关于此插件

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
<!--【必须】在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="/print-lock.css">

项目截图

拖拽设计使用

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

代码模式使用

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', // 设置语言 ['cn', 'en', 'de', 'es', 'fr', 'it', 'ja', 'ru', 'cn_tw']
});

直接打印 地址端口 与 Token 设置

hiprint.init({
  host: 'http://localhost:17521', // 可在此处设置连接地址与端口号
  token: 'token', // 可在此处设置连接 token 可缺省
});

vue/vue3 全局引入

全局引入,方便在任何地方不引入直接调用打印。示例为代码模式 (拖拽设计请往下看)

// main.js中 引入安装
import {hiPrintPlugin} from 'vue-plugin-hiprint'
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({});

jQuery/uniapp 项目使用

uniapp 需要嵌入到 web 浏览器中.(需要支持 window 全局对象环境)

<!-- index.html -->
<head>
    <!-- 打印样式是必须的,你可以调整成自由链接, 注意名称 print-lock.css -->
    <link rel="stylesheet" type="text/css" media="print" href="https://unpkg.com/vue-plugin-hiprint@latest/dist/print-lock.css" />
    <!-- 下列使用的都是 unpkg提供的 稳定性未知, 建议下载自行处理  -->
    <!-- jquery 必须 -->
    <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
    <!-- 条形码 -->
    <script src="https://unpkg.com/[email protected]/dist/JsBarcode.all.min.js"></script>
    <!-- 颜色选择器 -->
    <script src="https://unpkg.com/@claviska/[email protected]/jquery.minicolors.min.js"></script>
    <!-- 直接打印(print2)需要 -->
    <script src="https://unpkg.com/[email protected]/dist/socket.io.min.js"></script>
    <!-- toPdf需要 -->
    <script src="https://unpkg.com/[email protected]/lib/umd.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/jspdf.umd.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/html2canvas.js"></script>
    <!-- vue-plugin-hiprint 😃 -->
    <script src="https://unpkg.com/vue-plugin-hiprint@latest/dist/vue-plugin-hiprint.js"></script>
</head>
<body>
<!-- 注意 defer -->
<script defer>
  console.log('vue-plugin-hiprint')
  console.log(window['vue-plugin-hiprint'])
  console.log('hiprint')
  // 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)源码链接

image

https://gitee.com/CcSimple/electron-hiprint/releases

URLScheme hiprint://

安装客户端时请 以管理员身份运行 ,才能成功添加 URLScheme

使用:浏览器地址栏输入 hiprint:// 并回车

URLScheme

// js
window.open("hiprint://")

// element-ui
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})

// ant-design
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>
  ),
});

使用 中转服务 node-hiprint-transit 实现代理

配套客户端打印一直存在跨域、无法连接局域网其余打印机、跨网段无法连接的问题,所以诞生了这个中转代理服务。在 electron-hiprint v1.0.0.7 版本中添加了连接中转服务代理的设置,将会在 electron-hiprintnode-hiprint-transit 间建立通信,vue-plugin-hiprint 只需连接中转服务就能获取到所有连接中转服务的打印端信息,并且选择任意打印机进行打印。

连接中转服务只需要修改 host, 添加 token

import { hiprint } from 'vue-plugin-hiprint'

hiprint.init({
    host: 'https://printjs.cn:17521', // 此处输入服务启动后的地址
    token: 'vue-plugin-hiprint',     // 用于鉴权的token
});

// or

hiwebSocket.setHost("https://printjs.cn:17521", "vue-plugin-hiprint")

具体使用请转至 node-hiprint-transit

为此你需要作出这些改变:

  1. 你可以从 hiwebSocket 中获取到 clientsprinterList ,里面都将包含 client 信息

  2. 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

常见问题

可能花几分钟读一读下面的文章就能找到你遇到的问题:

常见问题汇总①: 【vue-plugin-hiprint】常见问题汇总①

常见问题汇总②: 【vue-plugin-hiprint】常见问题汇总②

常见问题汇总③: 【vue-plugin-hiprint】常见问题汇总③

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 '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 请 '加我好友' 备注加群, 邀你进群

捐赠支持, 或者请我喝杯咖啡☕️

如果对您有帮助,请点击右上角⭐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: [email protected]
 *
 */

关于LGPL协议

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

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

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

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

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