web 打印插件 hiprint 使用

web 打印插件 hiprint 使用官网:http://hiprint.io/demo:http://hiprint.io/demo/list官网介绍:hiprint是一个web打印的js组件,无需安装软件。支持windows,macOS,linux系统,支持移动端,PC端浏览器,angular,vue,react等分页预览,打印,操作简单,运行快速。预览界面为css+html。支持数据分组,批量预览。生成pdf,图片更方便设计界面截图;优点:浏览器设计打印;打印服务不局限于win;客户…

*使用过程问题可以参考文中 使用问题 部分或留言*

官网: hiprint.io

demo: hiprint.io

vue demo: https://github.com/byc233518/vue-hiprint-example

官网介绍: hiprint 是一个web 打印的js组件,无需安装软件。支持windows,macOS,linux 系统,支持移动端,PC端浏览器,angular,vue,react 等 分页预览,打印,操作简单,运行快速。预览界面为css+html 。支持数据分组,批量预览。生成pdf,图片更方便

设计界面截图; 

web 打印插件 hiprint 使用

优点:  浏览器设计打印; 打印服务不局限于 win; 客户端通过websocket连接打印服务; 可以获取服务端打印机列表并在客户端传参指定打印机打印;

缺点: 源代码没开源, 没有抽离 npm 包


vue 引入:

这里有个基于 vue-cli 2.0 的 demo:  https://github.com/byc233518/vue-hiprint-example , fork 自 peakcool 

前端包 hiprint.io 放到 src/assets/plugins/目录下

组件内引入: 

import "@/assets/plugins/hiprint/css/hiprint.css";
import "@/assets/plugins/hiprint/css/print-lock.css";

import "@/assets/plugins/hiprint/polyfill.min.js";
import "@/assets/plugins/hiprint/plugins/jquery.minicolors.min.js";
import { hiprint } from "@/assets/plugins/hiprint/hiprint.bundle.js";
import "@/assets/plugins/hiprint/plugins/jquery.hiwprint.js";
import "@/assets/plugins/hiprint/plugins/qrcode.js";
import "@/assets/plugins/hiprint/plugins/JsBarcode.all.min.js";
import { defaultElementTypeProvider } from "@/assets/plugins/hiprint/etypes/default-etype-provider.js";
import { printData } from "@/assets/plugins/hiprint/custom_test/print-data.js";
import { customPrintJson } from "@/assets/plugins/hiprint/custom_test/custom-print-json.js";

需要修改对应的插件导出

src/assets/plugins/hiprint/hiprint.bundle.js

export const hiprint = function (t) {
    var e = {};

    function n(i) {
...

src/assets/plugins/hiprint/etypes/default-etype-provider.js

import { hiprint } from "../hiprint.bundle.js";
export const defaultElementTypeProvider = (function() {
	return function(options) {
		var addElementTypes = function(context) {
			context.addPrintElementTypes("defaultModule", [
				new hiprint.PrintElementTypeGroup("常规", [

使用问题:

1. 打印设计页面, 始化没有把之前模板清掉 ==> 直接 操作DOM $(“#hiprint-printTemplate”).html(“”);

2. 内容全部都打印在了第一页 ==> 引入打印样式( html 中引入打印样式的css 复制一份 加上 media=”print” 属性 );

web 打印插件 hiprint 使用

3. 页码不能设置隐藏 ==> 双击页码;

4. 设计页面字段改成下拉选择 ==> new template 实例的时候传入 fields , 具体参数为 [{field:’name’ ,text:’姓名’ }, xxx]

5. 远程打印 ==> 修改源码 # 5169 (2.5.3 版本)  this.socket = io(“http://192.168.102.166:17521”, 改为自己的服务地址或者动态全局配置;

6. 自定义组件 ==>  init 时传入自定义组件, 如下:

const cusElements = [{
						tid: "defaultModule.image",
						title: "图片",
						data: "https://gd.jgyun.cn/img/logo-min.a96bab8e.jpg",
						type: "image"
					},
...
    
]
hiprint.init({
        providers: [new defaultElementTypeProvider(cusElements)]
      });

在 src/assets/plugins/hiprint/etypes/default-etype-provider.js  中接收参数并添加到类型中

import { hiprint } from "../hiprint.bundle.js";
export const defaultElementTypeProvider = (function() {
	return function(options) {
		var addElementTypes = function(context) {
			context.addPrintElementTypes("defaultModule", [
				new hiprint.PrintElementTypeGroup("自定义", options),
				new hiprint.PrintElementTypeGroup("常规", [
..

 7. 项目接入

__________________________________________________

  1. 主入口 html 中引入打印样式

     
    1. <link media="print" href="./static/css/hiprint.css" rel="stylesheet" />
    2. <link media="print" href="./static/css/print-lock.css" rel="stylesheet" />
  2. 组件中引入hiprint 相关组件

     
    1. import "@/assets/plugins/hiprint/polyfill.min.js";
    2. import "@/assets/plugins/hiprint/plugins/jquery.minicolors.min.js";
    3. import { hiprint } from "@/assets/plugins/hiprint/hiprint.bundle.js";
    4. import "@/assets/plugins/hiprint/plugins/jquery.hiwprint.js";
    5. import "@/assets/plugins/hiprint/plugins/qrcode.js";
    6. import "@/assets/plugins/hiprint/plugins/JsBarcode.all.min.js";
  3. 初始化控件

     
    1. $(document).ready(function() {
    2. hiprintTemplate = new hiprint.PrintTemplate();
    3. });
  4. 连接打印机并获取打印服务器上的打印机列表:

     
    1. hiwebSocket.stop();
    2. hiwebSocket.start(this.printerAddr);
    3. setTimeout(() => {
    4. this.printerList = hiprintTemplate.getPrinterList();
    5. }, 1000);
  5. 打印

     
    1. hiprintTemplate.print2(this.list, { printer: this.printer, title:'测试打印' });
    2. // this.list 打印数据
    3. // this.printer 选择的打印机, 不传的话是打印服务默认的打印机

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/36871.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注