hiprint在Vue.js+Element UI的使用

其他 2021-03-25 19:06:30 阅读次数: 0

原文：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";

需要修改对应的插件导出

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. 内容全部都打印在了第一页 ==> 引入打印样式;

  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("常规", [
..
  1. 项目接入

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

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

猜你喜欢

转载自blog.csdn.net/weixin_46099269/article/details/114363417
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022