vue使用vue-plugin-hiprint打印（代码模式）最简单！！最实用！！！

原创 已于 2025-11-12 10:54:59 修改 · 1.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #前端 #服务器

于 2025-09-23 15:43:42 首次发布
该文章已生成可运行项目，

vue-plugin-hiprint这个打印是一个拖拽模式下的打印，基于hiprint打印二次封装的，但上面一些功能也能继续使用

这个打印最方便的是拖拽成自己想要的样式，并生成一个模版JSON，然后在对应的id赋值就可以了，如果你刚接触就先看原版文章

他可以生成模版json，后续更改可以根据模版来拖拽就行

红框里的就是你生成的模版，也是你要打印的样式，数据要自己写（数据要和json中的id对应）

首先需要先进行下载插件

npm install vue-plugin-hiprint
<!--【必须】在index.html 文件中添加打印所需样式(cdn可能不稳定):-->
<link
  rel="stylesheet"
  type="text/css"
  media="print"
  href="https://npmmirror.com/package/vue-plugin-hiprint/files/dist/print-lock.css"
/>
<!-- OR -->
<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" />

这个css以及后来用到的io.js都是 在这里   下载  的

配置完成后需要再main.js引入

// 新打印的插件
import { hiPrintPlugin } from "vue-plugin-hiprint";
Vue.use(hiPrintPlugin, "$pluginName"); // $pluginName 为自定义名称
hiPrintPlugin.disAutoConnect();

引入之后，就可以先做你的打印模版  模版制作

做好之后会有一个查看JSON模版，然后需要把json复制保存

做完之后，就可以直接在组件内引用

首先在组件引入所需的打印方法


import {
    hiprint,
    defaultElementTypeProvider,
    disAutoConnect,
    autoConnect,
} from "vue-plugin-hiprint";
import { io } from "socket.io-client";

并在data中定义

 hiprintTemplate: null,  //接受打印的
            printObj: {
                         //打印的模版JSON  就是你拖拽的
                         }

然后就定义方法直接使用

 printRender() {
            let data = {
                headTitle: "标题",
                name: this.ybMisPayInfo.hospital,
                merchantNumber: this.ybMisPayInfo.merchantno,
                orderId: this.ybMisPayInfo.terminalno,
                startTime: this.ybMisPayInfo.startTransDate,
                endTime: this.ybMisPayInfo.endTransDate,
                total: this.totalCount1,
                allNum: this.totalAmount1,
                table: this.tableData
            }


            // 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
            var hiprintTemplate = new hiprint.PrintTemplate({
                template: this.printObj, // 模板json [对象]
                settingContainer: "#templateDesignDiv",
            });
            //打印
            hiprintTemplate.print(data);
          
        },

这个是预览打印的，如果需要直接打印则需要把print改为 print2

再需要安装一个打印控件  控件地址

下载dome然后打包安装运行

连接成功是绿色，未连接是蓝色

链接的代码是

hiprint.init({
  ...otherOptions,
  host: "http://localhost:17521", // 桌面客户端地址
  token: "vue-plugin-hiprint", // 客户端设置的令牌
});


或者

hiwebSocket.setHost(
  "http://localhost:17521",
  "vue-plugin-hiprint",
  // callback
  (connect) => {
    if (connect) {
      console.log("连接成功");
      // do something after connected
    } else {
      console.log("连接失败");
    }
  }
);

链接一般写在mounted里面

可以参考一下我这个

  // 打印创建
        printCreate() {
            const socket = io("http://192.168.1.17:17521", {
                transports: ["websocket"],
                auth: {
                    token: "vue-plugin-hiprint",
                },
            });

            socket.on("connect", () => {
                globalThis.connect = true;
                // TODO: Do something for your project
            });
            hiwebSocket.setHost(
                "http://localhost:17521",
                "vue-plugin-hiprint",
                // callback
                (connect) => {
                    if (connect) {
                        console.log("连接成功");
                        // do something after connected
                    } else {
                        console.log("连接失败");
                    }
                }
            );
        },
        printRender() {
            let data = {
                headTitle: "MIS省医保卡刷卡汇总",
                name: this.ybMisPayInfo.hospital,
                merchantNumber: this.ybMisPayInfo.merchantno,
                orderId: this.ybMisPayInfo.terminalno,
                startTime: this.ybMisPayInfo.startTransDate,
                endTime: this.ybMisPayInfo.endTransDate,
                total: this.totalCount1,
                allNum: this.totalAmount1,
                table: this.tableData
            }


            // 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
            var hiprintTemplate = new hiprint.PrintTemplate({
                template: this.printObj, // 模板json [对象]
                settingContainer: "#templateDesignDiv",
            });
            //打印
            hiprintTemplate.print2(data,{printer: "GP-U80300 Series"});
            hiprintTemplate.on("printSuccess", (res) => {
                console.log("打印成功", res);
            });
            hiprintTemplate.on("printError", (err) => {
                console.error("打印失败", err);
            });
        },

打印的模版

 {
                "panels": [
                    {
                        "index": 0,
                        "name": 1,
                        "height": null,
                        "width": 78,
                        "paperHeader": 0,
                        "panelPageRule": "none",
                        "paperFooter": 340.15748031496065,
                        "printElements": [
                            {
                                "options": {
                                    "left": 4.5,
                                    "top": 127.5,
                                    "height": 37.5,
                                    "width": 207,
                                    "tableFooterRepeat": "no",
                                    "fields": [
                                        {
                                            "text": "名称",
                                            "field": "transType",

                                        },
                                        {
                                            "text": "数量",
                                            "field": "count"
                                        },
                                        {
                                            "text": "规格",
                                            "field": "GG"
                                        },
                                        {
                                            "text": "条码",
                                            "field": "TM"
                                        },
                                        {
                                            "text": "单价",
                                            "field": "DJ"
                                        },
                                        {
                                            "text": "金额",
                                            "field": "amount"
                                        }
                                    ],
                                    "field": "table",
                                    "tableHeaderRepeat": "first",
                                    "qid": "table",
                                    "coordinateSync": false,
                                    "widthHeightSync": false,
                                    "right": 216,
                                    "bottom": 142.5,
                                    "vCenter": 108.75,
                                    "hCenter": 115.5,
                                    "columns": [
                                        [
                                            {
                                                "width": 61.42460960921844,
                                                "title": "类型",
                                                "field": "transType",

                                                "checked": true,
                                                "columnId": "transType",
                                                "fixed": false,
                                                "rowspan": 1,
                                                "colspan": 1,
                                                "align": "center",
                                                "tableQRCodeLevel": 0,
                                                "tableSummaryTitle": true,
                                                "tableSummary": ""
                                            },
                                            {
                                                "width": 62.6094585270541,
                                                "title": "数量",
                                                "field": "count",
                                                "checked": true,
                                                "columnId": "count",
                                                "fixed": false,
                                                "rowspan": 1,
                                                "colspan": 1,
                                                "align": "center"
                                            },
                                            {
                                                "width": 82.96593186372746,
                                                "title": "金额",
                                                "field": "amount",
                                                "checked": true,
                                                "columnId": "amount",
                                                "fixed": false,
                                                "rowspan": 1,
                                                "colspan": 1,
                                                "align": "center"
                                            },
                                            {
                                                "width": 80,
                                                "title": "规格",
                                                "field": "GG",
                                                "checked": false,
                                                "columnId": "GG",
                                                "fixed": false,
                                                "rowspan": 1,
                                                "colspan": 1,
                                                "align": "center"
                                            },
                                            {
                                                "width": 100,
                                                "title": "条码",
                                                "field": "TM",
                                                "checked": false,
                                                "columnId": "TM",
                                                "fixed": false,
                                                "rowspan": 1,
                                                "colspan": 1,
                                                "align": "center"
                                            },
                                            {
                                                "width": 100,
                                                "title": "单价",
                                                "field": "DJ",
                                                "checked": false,
                                                "columnId": "DJ",
                                                "fixed": false,
                                                "rowspan": 1,
                                                "colspan": 1,
                                                "align": "center"
                                            }
                                        ]
                                    ]
                                },
                                "printElementType": {
                                    "title": "订单数据",
                                    "type": "table",
                                    "editable": true,
                                    "columnDisplayEditable": true,
                                    "columnDisplayIndexEditable": true,
                                    "columnTitleEditable": true,
                                    "columnResizable": true,
                                    "columnAlignEditable": true,
                                    "isEnableEditField": true,
                                    "isEnableContextMenu": true,
                                    "isEnableInsertRow": true,
                                    "isEnableDeleteRow": true,
                                    "isEnableInsertColumn": true,
                                    "isEnableDeleteColumn": true,
                                    "isEnableMergeCell": true
                                }
                            },
                            {
                                "options": {
                                    "left": 6,
                                    "top": 168,
                                    "height": 16,
                                    "width": 43.5,
                                    "title": "总计",
                                    "fontSize": 12.75,
                                    "fontWeight": "700",
                                    "textAlign": "left",
                                    "textContentVerticalAlign": "middle",
                                    "right": 52.5,
                                    "bottom": 183.25,
                                    "vCenter": 30.75,
                                    "hCenter": 175.25,
                                    "coordinateSync": false,
                                    "widthHeightSync": false,
                                    "qrCodeLevel": 0
                                },
                                "printElementType": {
                                    "title": "库管签字",
                                    "type": "text"
                                }
                            },
                            {
                                "options": {
                                    "left": 24,
                                    "top": 3,
                                    "height": 17,
                                    "width": 178.5,
                                    "testData": "刷卡,
                                    "fontSize": 16.5,
                                    "field": "headTitle",
                                    "fontWeight": "700",
                                    "textAlign": "center",
                                    "hideTitle": true,
                                    "title": "刷卡",
                                    "qid": "headTitle",
                                    "coordinateSync": false,
                                    "widthHeightSync": false,
                                    "qrCodeLevel": 0,
                                    "right": 204,
                                    "bottom": 19.25,
                                    "vCenter": 114.75,
                                    "hCenter": 10.75
                                },
                                "printElementType": {
                                    "title": "单据表头",
                                    "type": "text"
                                }
                            },
                            {
                                "options": {
                                    "left": 82.5,
                                    "top": 171,
                                    "height": 9.75,
                                    "width": 60,
                                    "title": "文本",
                                    "right": 142.5,
                                    "bottom": 141,
                                    "vCenter": 112.5,
                                    "hCenter": 136.125,
                                    "field": "total",
                                    "testData": "1231",
                                    "coordinateSync": false,
                                    "widthHeightSync": false,
                                    "hideTitle": true,
                                    "fontSize": 12.75,
                                    "qrCodeLevel": 0
                                },
                                "printElementType": {
                                    "title": "文本",
                                    "type": "text"
                                }
                            },
                            {
                                "options": {
                                    "left": 159,
                                    "top": 169.5,
                                    "height": 9.75,
                                    "width": 60,
                                    "right": 216.75,
                                    "bottom": 146.25,
                                    "vCenter": 186.75,
                                    "hCenter": 141.375,
                                    "field": "allNum",
                                    "testData": "3132132",
                                    "coordinateSync": false,
                                    "widthHeightSync": false,
                                    "hideTitle": true,
                                    "fontSize": 12.75,
                                    "qrCodeLevel": 0
                                },
                                "printElementType": {
                                    "title": "文本",
                                    "type": "text"
                                }
                            },
                            {
                                "options": {
                                    "left": 7.5,
                                    "top": 106.5,
                                    "height": 16,
                                    "width": 208.5,
                                    "field": "endTime",
                                    "testData": "2020-01-01",
                                    "fontSize": 12.75,
                                    "textAlign": "left",
                                    "textContentVerticalAlign": "middle",
                                    "title": "结束时间",
                                    "qid": "date",
                                    "coordinateSync": false,
                                    "widthHeightSync": false,
                                    "qrCodeLevel": 0
                                },
                                "printElementType": {
                                    "title": "业务日期",
                                    "type": "text"
                                }
                            },
                            {
                                "options": {
                                    "left": 7.5,
                                    "top": 87,
                                    "height": 16,
                                    "width": 208.5,
                                    "field": "startTime",
                                    "testData": "2020-01-01",
                                    "fontSize": 12.75,
                                    "textAlign": "left",
                                    "textContentVerticalAlign": "middle",
                                    "title": "开始时间",
                                    "qid": "date",
                                    "right": 126,
                                    "bottom": 64,
                                    "vCenter": 66,
                                    "hCenter": 56,
                                    "coordinateSync": false,
                                    "widthHeightSync": false,
                                    "qrCodeLevel": 0
                                },
                                "printElementType": {
                                    "title": "业务日期",
                                    "type": "text"
                                }
                            },
                            {
                                "options": {
                                    "left": 9,
                                    "top": 28.5,
                                    "height": 16,
                                    "width": 207,
                                    "field": "orderId",
                                    "testData": "XS888888888",
                                    "fontSize": 12.75,
                                    "textAlign": "left",
                                    "textContentVerticalAlign": "middle",
                                    "title": "商户名称",
                                    "qid": "orderId",
                                    "coordinateSync": false,
                                    "widthHeightSync": false,
                                    "qrCodeLevel": 0
                                },
                                "printElementType": {
                                    "title": "订单编号",
                                    "type": "text"
                                }
                            },
                            {
                                "options": {
                                    "left": 9,
                                    "top": 48,
                                    "height": 16,
                                    "width": 207,
                                    "field": "orderId",
                                    "testData": "XS888888888",
                                    "fontSize": 12.75,
                                    "textAlign": "left",
                                    "textContentVerticalAlign": "middle",
                                    "title": "订单编号",
                                    "qid": "orderId_1",
                                    "coordinateSync": false,
                                    "widthHeightSync": false,
                                    "qrCodeLevel": 0
                                },
                                "printElementType": {
                                    "title": "订单编号",
                                    "type": "text"
                                }
                            },
                            {
                                "options": {
                                    "left": 9,
                                    "top": 67.5,
                                    "height": 16,
                                    "width": 207,
                                    "field": "orderId",
                                    "testData": "XS888888888",
                                    "fontSize": 12.75,
                                    "textAlign": "left",
                                    "textContentVerticalAlign": "middle",
                                    "title": "订单编号",
                                    "qid": "orderId_2",
                                    "coordinateSync": false,
                                    "widthHeightSync": false,
                                    "qrCodeLevel": 0
                                },
                                "printElementType": {
                                    "title": "订单编号",
                                    "type": "text"
                                }
                            }
                        ],
                        "paperNumberLeft": 190.5,
                        "paperNumberTop": 204,
                        "paperNumberDisabled": true,
                        "paperNumberContinue": true,
                        "watermarkOptions": {
                            "content": "",
                            "fillStyle": "rgba(184, 184, 184, 0.3)",
                            "fontSize": "14px",
                            "rotate": 25,
                            "width": 200,
                            "height": 200,
                            "timestamp": false,
                            "format": "YYYY-MM-DD HH:mm"
                        },
                        "panelLayoutOptions": {
                            "layoutType": "column",
                            "layoutRowGap": 0,
                            "layoutColumnGap": 0
                        }
                    }
                ]
            }

最后就是直接调用就行了，对了在赋值的时候看一下JSON模版的field字段，要和你的数据相对应

本文章已经生成可运行项目
vue打印模版模块，使用vue-plugin-hiprint插件搭建过程
qq_14852047的博客
09-09 6633
vue打印模版模块，使用vue-plugin-hiprint插件搭建过程
使用vue-plugin-hiprint实现打印功能
妍妍子的博客
11-17 3216
1.效果图 2.安装 插件安装 npm i vue-plugin-hiprint 引入样式 复制一份hiprint/css/print-lock.css文件到public中，在index.html中引入 <!-- 防止打印不正常 --> <link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css" /> 3.引入插件 全局引入 // ma
vue-hiprint-example:基于Vue Element-UI的hiprint项目
05-11
Vue Hiprint示例项目 基于Vue Element-UI的hiprint项目 屏幕截图 入门 该项目是vue指纹的起点。 步骤1 > git clone https://github.com/peakcool/vue-hiprint-example.git 第2步 > cd YOUR_PROJECT/vue-hiprint-example 第三步 > npm install 或者 > yarn 第四步 > npm run dev 资源 一些帮助您入门的资源：
vue打印插件使用
11-26
vue打印插件使用 第一步: npm install vue-easy-print --save 第二步，在你的vue页面里 import vueEasyPrint from "vue-easy-print"; import demo from './your path/demo'; // in your vue [removed] export default { components: { vueEasyPrint, demo } } 第三步，加载模板: slot-scope func.getChineseNumber接收到的方法是一个将金额转换成中文的 配置props参数 // 针对分页表格模式：末尾空白行插入 spaceRow: { type:Boolean, default:false, }, // 针对分页表格模式：传入的打印数据。 tableData:{ type:Object, default() { return undefined } }, // 是否显示表格 tableShow:{ type:Boolean, default:false }, // 每页多少行 onePageRow: { type:Number, default:5, }, // 复制打印页面前调用的钩子 beforeCopy:Function, // 打印页面前调用的钩子 beforePrint:Function,
vue-plugin-hiprint 打印模版使用
m0_46978096的博客
08-07 1708
本文介绍了vue-plugin-hiprint打印插件的使用方法。首先通过npm安装插件和jquery依赖，并在index.html中引入打印样式。核心代码展示了如何初始化拖拽元素、创建打印模板，并提供了图片上传功能的实现示例，包括图片校验、FormData提交和base64转换。插件支持自定义字体、撤销重做等扩展功能，通过回调函数可监听模板变更。该方案适用于需要动态生成打印模板的前端项目，支持多面板布局和客户端打印功能。
vue2控制打印机打印(二)
var_let_const的博客
12-21 1563
打印
【hiprint】hiprint的使用方法（附使用案例）hiprint 表格数据传输问题解决办法
chirp_CQ的博客
12-14 2万+
hiprint打印table数据无法传输解决办法事件起因：问题描述： 事件起因： 因为前两天要弄一个a4纸的打印功能（嵌入在网页里面），结果前两天因为弄这个搞得挺恼火的，到笔者终于解决了这个问题后，特此来说明一下这个问题，以便后来者能够吸取经验教训 问题描述： 我所创建的一个空的vue项目，后面在这个里面加入hiprint进行数据的打印
【VUE3】Vue中使用vue-plugin-hiprint插件进行打印
VT_馒头的博客
06-28 1万+
hiprint 是一个web 打印的js组件，无需安装软件。支持windows,macOS,linux 系统，支持移动端，PC端浏览器，angular,vue,react 等 分页预览，打印，操作简单，运行快速。预览界面为css+html 。支持数据分组，批量预览。生成pdf,图片更方便
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
浩星
07-14 2098
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
简单上手vue使用vue-plugin-hiprint进行打印
cyloser的专栏
09-22 3139
vue-plugin-hiprint是一个功能十分强大的打印插件，正因为功能强大，所以看起来感觉非常复杂，网上示例代码为了追求展现其强大，往往也做的非常庞大，学和分析起来对新手都不友好。本文较简单的让大家上手了解如何使用vue-plugin-hiprint插件打印自己页面需要打印的内容。1、安装插件：2、在要使用插件的页面导入插件：3、定义一个模板对象并传入模板设置。所谓模板就是你想打印到纸张上的数据和格式的设置，描述你要在什么样的纸上打印什么样的数据，数据打印出来的格式是什么样的等等信息。
打印插件vue-plugin-hiprint-npm-demo-ele
09-06
开发者可以通过npm命令轻松地安装、更新和管理项目依赖，这使得"vue-plugin-hiprint-npm-demo-ele"的使用变得简单快捷。 从文件名"vue-plugin-hiprint-npm_demo_ele"来看，这个插件很可能包含一个使用说明文档或者...
服务端生成sv-print, vue-plugin-hiprint打印模板图片, pdf, html. 用于小程序或非w
09-18
通过使用Vue插件系统，开发者可以方便地将hiprint集成到Vue项目中，实现丰富的打印功能。这一技术解决方案在很多需要通过服务器控制打印输出的业务场景中非常实用，例如在小程序、移动应用或者非Web环境中。 在使用...
vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用
2401_84434301的博客
05-16 1043
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue-Plugin-Hiprint 使用指南：构建专业级打印功能的全流程解析
qq_50708187的博客
01-31 1961
/ 动态模板配置示例panels: [index: 0,options: {left: 20,top: 20,title: '量子打印标题',},},options: {left: 20,top: 60,columns: [{ field: 'name', title: '名称', width: 100 }},// 注册条形码组件})})// 模板配置options: {width: 2,height: 40。
【开源打印组件】vue-plugin-hiprint初体验
热门推荐
qq_43843951的博客
09-12 21万+
本文介绍对vue-plugin-hiprint部分重要代码的解析，这是一个很好的开源插件，能够自己自定义打印模板，通过后端传来的数据进行渲染打印，官方也提供了许多的api供开发者使用。界面采用了antdesign。实现了免预览的直接打印。
从零开始掌握Vue可视化打印插件：vue-plugin-hiprint完整指南
最新发布
gitblog_00855的博客
11-19 704
想要为你的Vue项目添加专业级的打印功能吗？vue-plugin-hiprint正是你需要的解决方案！这个基于jQuery的强大打印插件，支持Vue2和Vue3，让你轻松实现拖拽式打印设计、报表生成和可视化编辑。 ## 🚀 快速上手：5分钟完成安装配置 **环境准备**：确保你的系统已安装Node.js 16.x或更高版本，这是项目稳定运行的基础要求。 **核心安装步骤**： 1. **
vue3打印解决方案：Vue-Plugin-HiPrint
weixin_69174819的博客
12-03 2691
vue-plugin-hiprint在vue中使用
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值