hiprint在Vue.js+Element UI的使用_hiprint官网

原文：https://blog.csdn.net/byc233518/article/details/107705278

官网: http://hiprint.io/

demo: http://hiprint.io/demo/list

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

设计界面截图：

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

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

vue 引入:

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

前端包 http://hiprint.io/download 放到 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";
1
2
3
4
5
6
7
8
9
10
11
12

需要修改对应的插件导出

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

export const hiprint = function (t) {
    var e = {};
 
    function n(i) {
...
1
2
3
4
5

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
2
3
4
5
6

使用问题:

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

2. 内容全部都打印在了第一页 ==> 引入打印样式;

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)]
      });
1
2
3
4
5
6
7
8
9
10
11
12

在 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("常规", [
..
1
2
3
4
5
6
7
8

7. 项目接入

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

2、组件中引入hiprint 相关组件

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”;
3、初始化控件

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

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

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

最后附上在平台的使用：
平台是把js与css压缩导入的

{VUE},/common/assets/plugins/vue/element-ui/element-ui.js,/common/assets/plugins/vue/element-ui/element-ui.css,/system/file/business_order.css,/files/static/commoncss/hiprint.core.css,/files/static/commonjs/hiprint.core.js
1

hiprint在js的使用

//打印
onPrint() {
    //定义模板json  hiprint不识别忽略
    var hiprintTemplate = new hiprint.PrintTemplate({
        template: {"panels":[{"index":0,"height":297,"width":210,"paperHeader":49.5,"paperFooter":780,"printElements":[{"options":{"left":262.5,"top":52.5,"height":9.75,"width":82.5,"title":"销售订单","fontSize":19.5},"printElementType":{"type":"text"}},{"options":{"left":180,"top":75,"height":9.75,"width":126,"title":"销售日期","field":"orderDate"},"printElementType":{"type":"text"}},{"options":{"left":309,"top":75,"height":9.75,"width":259.5,"title":"客户","field":"salesCustomerDesc"},"printElementType":{"type":"text"}},{"options":{"left":19.5,"top":75,"height":9.75,"width":150,"title":"销售订单","field":"orderCode"},"printElementType":{"type":"text"}},{"options":{"left":178.5,"top":93,"height":9.75,"width":127.5,"title":"结算方式","field":"settleMethodDesc","testData":"支付宝"},"printElementType":{"type":"text"}},{"options":{"left":309,"top":93,"height":9.75,"width":121.5,"title":"联系人","field":"contactUser"},"printElementType":{"type":"text"}},{"options":{"left":19.5,"top":93,"height":9.75,"width":150,"title":"客户订单","field":"customerOrder"},"printElementType":{"type":"text"}},{"options":{"left":432,"top":93,"height":9.75,"width":136.5,"title":"联系电话","field":"contactPhone"},"printElementType":{"type":"text"}},{"options":{"left":19.5,"top":109.5,"height":39,"width":549,"textAlign":"center","field":"detailList","columns":[[{"title":"项次","field":"orderSeq","width":28.675373869095594,"colspan":1,"rowspan":1,"checked":true,"columnId":"orderSeq"},{"title":"物料号","field":"material","width":83.85182567889859,"colspan":1,"rowspan":1,"checked":true,"columnId":"material"},{"title":"物料描述","field":"materialDesc","width":99.20163436367484,"colspan":1,"rowspan":1,"checked":true,"columnId":"materialDesc"},{"title":"规格","field":"materialSpec","width":74.34142950693378,"colspan":1,"rowspan":1,"checked":true},{"title":"数量","field":"qty","width":54.082548951480675,"colspan":1,"rowspan":1,"checked":true,"columnId":"planQty"},{"title":"单价","field":"unitPrice","width":43.366939065981505,"colspan":1,"rowspan":1,"checked":true,"columnId":"unitPrice"},{"title":"总价","field":"totalCost","width":43.06711654562698,"colspan":1,"rowspan":1,"checked":true,"columnId":"totalCost"},{"title":"已出库数量","field":"outboundQty","width":45.989780649905455,"colspan":1,"rowspan":1,"checked":true,"columnId":"qty"},{"title":"单位","field":"unitDesc","width":23.878609887169446,"colspan":1,"rowspan":1,"checked":true,"columnId":"unit"},{"title":"备注","field":"remark","width":52.54474148123322,"colspan":1,"rowspan":1,"checked":true,"columnId":"remark"}]]},"printElementType":{"title":"表格","type":"tableCustom"}},{"options":{"left":309,"top":154.5,"height":9.75,"width":121.5,"title":"销售员","field":"salesUser"},"printElementType":{"type":"text"}},{"options":{"left":432,"top":154.5,"height":9.75,"width":136.5,"title":"销售电话","field":"salesPhone"},"printElementType":{"type":"text"}},{"options":{"left":19.5,"top":154.5,"height":9.75,"width":270,"title":"项目","field":"projectDesc"},"printElementType":{"type":"text"}},{"options":{"left":309,"top":172.5,"height":9.75,"width":120,"title":"审核人","field":"confirmEmployee"},"printElementType":{"type":"text"}},{"options":{"left":151.5,"top":172.5,"height":9.75,"width":138,"title":"制单时间","field":"createTime"},"printElementType":{"type":"text"}},{"options":{"left":432,"top":172.5,"height":9.75,"width":136.5,"title":"审核时间","field":"confirmTime"},"printElementType":{"type":"text"}},{"options":{"left":19.5,"top":172.5,"height":9.75,"width":121.5,"title":"制单人","field":"createEmployee"},"printElementType":{"type":"text"}},{"options":{"left":151.5,"top":189,"height":12,"width":417,"title":"交付地址","field":"deliveryAddress"},"printElementType":{"type":"longText"}},{"options":{"left":19.5,"top":189,"height":12,"width":121.5,"title":"交货日期","field":"deliveryTime"},"printElementType":{"type":"text"}},{"options":{"left":19.5,"top":207,"height":42,"width":547.5,"title":"备注","field":"orderRemark"},"printElementType":{"type":"longText"}}],"paperNumberLeft":565.5,"paperNumberTop":819,"paperNumberFormat":"paperNo/paperCount"}]}
    });
    //给模板字段赋值
    var printData = {
        orderCode: this.saleInfo.orderCode,
        orderDate: this.saleInfo.orderDate,
        salesCustomerDesc: this.saleInfo.materialSalesCustomer.salesCustomerDesc,
        settleMethodDesc: this.saleInfo.settleMethodDesc,
        customerOrder: this.saleInfo.customerOrder,
        contactUser: this.saleInfo.contactUser,
        contactPhone: this.saleInfo.contactPhone,
        projectDesc: this.saleInfo.projectDesc,
        salesUser: this.saleInfo.salesUser,
        salesPhone: this.saleInfo.salesPhone,
        createEmployee: this.saleInfo.createUserDesc,
        confirmEmployee: this.saleInfo.confirmUserDesc,
        deliveryTime: this.saleInfo.deliveryTime,
        deliveryAddress: this.saleInfo.deliveryAddress,
        orderRemark: this.saleInfo.orderRemark,
        detailList: this.saleInfo.detailList,
        createTime: this.dateFormat(this.saleInfo.createTime),
        confirmTime: this.dateFormat(this.saleInfo.confirmTime),
        modifyTime: this.dateFormat(this.saleInfo.modifyTime)
    };
    hiprintTemplate.print(printData);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30