vue3 hiprint 打印 JSON模板

Vue插件hiprint安装与打印使用指南
最新推荐文章于 2025-09-23 15:43:42 发布
原创 最新推荐文章于 2025-09-23 15:43:42 发布 · 839 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#json #vue

该文章已生成可运行项目，

1.安装

npm i vue-plugin-hiprint

2.引用

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

3.引用css

<link rel="stylesheet" type="text/css" media="print" href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css" />

4.初始化hiprint

hiPrintPlugin.disAutoConnect(); // 这里是关闭连接 离线打印
hiprint.init();

5.定义JSON模板（自定义设计生成的JSON）

mypanel: {
        panels: [
          {
            "index": 0,
            "name": 1,
            "height": 296.6,
            "width": 210,
            "paperHeader": 49.5,
            "paperFooter": 778.9494949494949,
            "printElements": [
              {
                "options": {
                  "left": 16.5,
                  "top": 18,
                  "height": 17,
                  "width": 120,
                  "testData": "单据表头",
                  "fontSize": 16.5,
                  "fontWeight": "700",
                  "textAlign": "center",
                  "hideTitle": true,
                  "title": "单据表头"
                },
                "printElementType": {
                  "title": "单据表头",
                  "type": "text"
                }
              },
              {
                "options": {
                  "left": 21,
                  "top": 66,
                  "height": 54,
                  "width": 550,
                  "fields": [
                    {
                      "text": "名称",
                      "field": "NAME"
                    },
                    {
                      "text": "数量",
                      "field": "SL"
                    },
                    {
                      "text": "规格",
                      "field": "GG"
                    },
                    {
                      "text": "条码",
                      "field": "TM"
                    },
                    {
                      "text": "单价",
                      "field": "DJ"
                    },
                    {
                      "text": "金额",
                      "field": "JE"
                    },
                    {
                      "text": "备注",
                      "field": "DETAIL"
                    }
                  ],
                  "field": "table",
                  "footerFormatter": "function (options, rows, data, currentPageGridRowsData) {\n        console.log(currentPageGridRowsData);\n        if (data && data[\"totalCap\"]) {\n          return `<td style=\"padding:0 10px\" colspan=\"100\">${\"应收金额大写: \" + data[\"totalCap\"]}</td>`;\n        }\n        return '<td style=\"padding:0 10px\" colspan=\"100\">应收金额大写: </td>';\n      }",
                  "qid": "table",
                  "columns": [
                    [
                      {
                        "width": 275,
                        "title": "名称",
                        "field": "NAME",
                        "checked": true,
                        "columnId": "NAME",
                        "fixed": false,
                        "rowspan": 1,
                        "colspan": 1,
                        "align": "center"
                      },
                      {
                        "width": 275,
                        "title": "金额",
                        "field": "JE",
                        "checked": true,
                        "columnId": "JE",
                        "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": 481.5,
                  "top": 798,
                  "height": 16,
                  "width": 120,
                  "field": "tel",
                  "testData": "18888888888",
                  "fontSize": 6.75,
                  "fontWeight": "700",
                  "textAlign": "left",
                  "textContentVerticalAlign": "middle",
                  "title": "客户电话",
                  "qid": "tel"
                },
                "printElementType": {
                  "title": "客户电话",
                  "type": "text"
                }
              }
            ],
            "paperNumberLeft": 564,
            "paperNumberTop": 760.5,
            "paperNumberContinue": true,
            "watermarkOptions": {},
            "panelLayoutOptions": {}
          }
        ]
      },

6.定义数据 这么多数据是为了测试分页

data: [
        {
          NAME: 'aaa',
          JE: 111,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        },{
          NAME: 'bbb',
          JE: 222,
        }
      ]

7.打印

	let printData = {
        tel: 'xxxx', // 客户电话号 在JSON模板中有对应字段
        table: state.data // 对应JSON模板中的table参数
      }
      var hiprintTemplate = new hiprint.PrintTemplate({template: state.mypanel}) // 定义模板
      hiprintTemplate.print(printData); //开始打印

8.如果打印出现格式错乱问题请看第三条，有没有正确引用css

9.成果

在这里插入图片描述

本文章已经生成可运行项目
巽鸣
关注
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 2865
hiprint
Hiprint 打印插件在 Vue3 中的深度剖析
qq_22232065的博客
08-26 2417
Hiprint 打印插件在 Vue3 项目中具有重要的地位和显著的优势。首先，它为 Vue3 项目提供了强大且便捷的打印功能。在现代的 Web 应用开发中，打印需求常常存在，而 Hiprint 很好地满足了这一需求，让开发者能够轻松实现打印相关的操作。其优势之一在于简单易用。对于开发者而言，无需深入复杂的打印技术细节，通过简单的配置和调用，就能快速集成打印功能到 Vue3 项目中，大大提高了开发效率。此外，Hiprint 具有高度的灵活性。
hiprint使用初体验，模板设计经验分享
热门推荐
Rosen's
11-28 1万+
在线模板设计地址：http://www.hinnn.com/design 在项目中使用过一两次hiprint，主要是设计到自定义标签打印功能。之前项目中设计到标签打印，都是使用c#开发的客户端进行打印，web端主要打印报表之类的设计，使用的是ireport开发。 使用c#开发的客户端必须要在安装了bartendar软件的环境进行开发，缺点就是需要购买/安装bartendar软件，这个软件是需要...
JS打印插件hiprint.js
05-12
JS打印插件hiprint.js
vue使用vue-plugin-hiprint打印（代码模式）最简单！！最实用！！！
最新发布
weixin_53484933的博客
09-23 1727
vue-plugin-hiprint这个打印是一个拖拽模式下的打印，基于hiprint打印二次封装的，但上面一些功能也能继续使用。这个打印最方便的是拖拽成自己想要的样式，并生成一个模版JSON，然后在对应的id赋值就可以了，如果你刚接触就先看。最后就是直接调用就行了，对了在赋值的时候看一下JSON模版的field字段，要和你的数据相对应。这个是预览打印的，如果需要直接打印则需要把print改为 print2。做好之后会有一个查看JSON模版，然后需要把json复制保存。引入之后，就可以先做你的打印模版。
Vue3结合vue-plugin-hiprint实现自定义打印模板【模板数据访问后端接口】设计与布局（手把手教你，直接复制粘贴使用）
Da_zhenzai的博客
10-24 9827
在现代Web应用开发中，打印功能是不可或缺的一部分，尤其是在需要输出标准化文档的场景下。本文将详细介绍如何在Vue3项目中利用插件实现一个可定制的打印模板设计器，并通过具体示例来展示其配置与使用方法。
vue使用hiprint做打印模板并打印
qq_56995244的博客
06-17 4519
设计：建立一个模板表；有以下字段：id（唯一键），name（前端显示模板名称），printJson（模板字符串），type（分类-同类的模板在同一个地方显示并可打印）,等(做成配置时需要其他条件自己考虑加)前端统一传值可为两种对象和数组（对象只打印一个，数组有多少条数据打印多少个），这个hiprint会自己判断，可以不管。然后再写个组件，弹窗显示打印页面，引用打印页面，传入数据（打印内容与打印模板）然后在要打印的页面使用，我这边是把打印组件封装到表格组件里了，做成了配置项。点击设计进入设计页面，如图。
精选资源
hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑
05-28
hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑。此插件仅仅是一个JavaScript【工具库】而非 Vue【组件库】，所以它默认是不包含demo中所见的那些组件页面的（demo代码...
使用vue-plugin-hiprint打印json模板
01-03
### 使用 `vue-plugin-hiprint` 打印 JSON 模板 为了实现通过 `vue-plugin-hiprint` 插件打印 JSON 模板的功能，可以按照如下方法操作： #### 安装依赖 首先，在项目中安装所需的插件： ```bash npm install vue-...
服务端生成sv-print, vue-plugin-hiprint打印模板图片, pdf, html. 用于小程序或非w
09-18
它通过特定的服务端语言，如Node.js，结合了hiprint插件与vue-plugin-hiprint，来实现对打印模板图片、PDF及HTML的生成。这一技术主要应用在需要在服务器端对文件进行处理，生成可打印的文档，并发送到客户端进行...
Vue集成hiprint实现打印模板功能详解
综上所述，Vue结合hiprint实现打印模板不仅解决了传统打印方式的诸多痛点，还为前端工程师提供了一套完整的可视化打印解决方案框架。它融合了现代Web技术栈的最佳实践，体现了组件化、数据驱动、前后端分离的设计...
vue 打印（模板套打）
01-08
vue 使用  print-template 生成pdf 打印 。支持生成二维码、条形码、文本、图片、线  安装 yarn add print-template 或 npm install print-template 内容类型 line 线条 barcode 条形码 qrcode 二维码 image 图片 text 文本 内容属性 通用 x 必须 所有类型  y 必须 所有类型  default 固定内容默认值 线条 【line】 length 线条长度 number orientation 线条方向   p 竖线 / l 横线 s
hiprint_demo.zip
04-10
根据hiprint.js实现的示例，其中有三个例子，一个拖拽，一个自定义，一个初始化json配置，直接下载后就可以运行。
HiPrint Demo
09-15
hiprint 是一个web 打印的js组件，无需安装软件。支持windows,macOS,linux 系统，支持移动端，PC端浏览器，angular,vue,react 等 分页预览，打印，操作简单，运行快速。预览界面为css+html 。支持数据分组，批量预览。生成pdf,图片更方便
vue打印模版模块，使用vue-plugin-hiprint插件搭建过程
qq_14852047的博客
09-09 6709
vue打印模版模块，使用vue-plugin-hiprint插件搭建过程
Vue3工程实现一个打印设计器，以vue-plugin-hiprint为例（一）
qingwu_75的博客
03-06 1万+
本章节将 vue-plugin-hiprint 插件的基本设计功能进行了实现，在下一章节我们会将模板与自己的业务表单数据进行结合，实现一个随着表单数据变化而打印内容变化的动态打印功能。
vue3项目中使用 hiprint
小废物
03-20 2295
hiprint 是一个web 打印的js组件，无需安装软件。支持移动端，PC端浏览器，angular,vue,react, 等 分页预览，打印，操作简单，运行快速。在 vue3 项目中使用打印，是通过 vue3 的插件进行操作，可以通过官网地址。hiprint 打印官网。
Vue3 通过Vue3-Print-Nb在线工单打印 模板打印 自定义打印 打印下载
生产队的驴
04-27 1108
通过在应用中集成打印功能，用户可以直接从页面打印工单，不用导出文件或使用其他外部工具。节省时间，提高效率，特别是当需要大量打印时。同时也可以将文件模板上传到数据库，提供给部门工作自行下载。开源文档：https://www.npmjs.com/package/vue-print-nb。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值