vue3+uniapp 使用vue-plugin-hiprint中实现打印效果

浩星2025-07-15 14:35

前言：

vue3+uniapp 使用vue-plugin-hiprint中实现打印效果

官网地址：gitee

https://gitee.com/ccsimple/vue-plugin-hiprinthttps://gitee.com/ccsimple/vue-plugin-hiprint

实现效果：

预览打印内容：

实现步骤：

1、安装插件

javascript 复制代码 
npm install vue-plugin-hiprint hiprint

2、main.js中配置

javascript 复制代码 
import { hiprint } from 'vue-plugin-hiprint' //添加

const app = createApp(App)

// 注册插件
app.use(hiprint, { //添加
  // 可选配置
  option: {
    // hiprint 配置项
  }
})

app.mount('#app')

3、新建vue页面，上添加元素

template中添加元素：

hiprint-printTemplate ：预览元素

hiprint-designTemplate：设计器，配置各种属性，如果点击设计模板没出来，再点击下dom元素就出现了

hiprint-printPagination：页码，支持打印多页

javascript 复制代码 
<template>
  <view>
    <!-- 打印预览容器 -->
    <div id="hiprint-printTemplate"></div>
    
    <!-- 打印设计器容器 -->
    <div id="hiprint-designTemplate"></div>
		
    <div class="hiprint-printPagination"></div>
    
    <button @click="handlePrint">打印</button>
    <button @click="showDesigner">设计模板</button>
  </view>
</template>
js部分：

new hiprint.PrintTemplate 是最核心的配置，配置打印dom元素

dataContainer、settingContainer 都是指向dom元素

paginationContainer 页码dom元素

其他配置可以自己试试，没有也无所谓

javascript 复制代码 
<script setup>
import { ref, onMounted } from 'vue'
import { hiprint } from 'vue-plugin-hiprint'

// 定义模板
const template = ref(null)
const printTemplate = ref(null)

onMounted(() => {

    // 引入后使用示例
	hiprint.init();
	
	
  // 初始化打印模板
  printTemplate.value = new hiprint.PrintTemplate({
    template: {}, // 模板json
    // dataContainer: '#hiprint-printTemplate' // 元素参数容器
    settingContainer: '#hiprint-printTemplate', // 元素参数容器
		paginationContainer: '.hiprint-printPagination', // 多面板的容器
		// ------- 下列是可选功能 -------
		// 图片选择功能
		onImageChooseClick: (target) => {
			// 测试 3秒后修改图片地址值
			setTimeout(() => {
				// target.refresh(url,options,callback)
				// callback(el, width, height) // 原元素,宽,高
				// target.refresh(url,false,(el,width,height)=>{
				//   el.options.width = width;
				//   el.designTarget.css('width', width + "pt");
				//   el.designTarget.children('.resize-panel').trigger($.Event('click'));
				// })
				target.refresh("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAIIAQMAAAB99EudAAAABlBMVEUmf8vG2O41LStnAAABD0lEQVR42u3XQQqCQBSAYcWFS4/QUTpaHa2jdISWLUJjjMpclJoPGvq+1WsYfiJCZ4oCAAAAAAAAAAAAAAAAAHin6pL9c6H/fOzHbRrP0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0u/SY9LS0tLS0tLS0tLS0n+edm+UlpaWlpaWlpaWlpaW/tl0Ndyzbno7/+tPTJdd1wal69dNa6abx+Lq6TSeYtK7BX/Diek0XULSZZrakPRtV0i6Hu/KIt30q4fM0pvBqvR9mvsQkZaW9gyJT+f5lsnzjR54xAk8mAUeJyMPwYFH98ALx5Jr0kRLLndT7b64UX9QR/0eAAAAAAAAAAAAAAAAAAD/4gpryzr/bja4QgAAAABJRU5ErkJggg==",{
					// auto: true, // 根据图片宽高自动等比(宽>高?width:height)
					// width: true, // 按宽调整高
					// height: true, // 按高调整宽
					real: true // 根据图片实际尺寸调整(转pt)
				})
			}, 3000)
			// target.getValue()
			// target.refresh(url)
		},
		// 自定义可选字体
		// 或者使用 hiprintTemplate.setFontList([])
		// 或元素中 options.fontList: []
		fontList: [
			{title: '微软雅黑', value: 'Microsoft YaHei'},
			{title: '黑体', value: 'STHeitiSC-Light'},
			{title: '思源黑体', value: 'SourceHanSansCN-Normal'},
			{title: '王羲之书法体', value: '王羲之书法体'},
			{title: '宋体', value: 'SimSun'},
			{title: '华为楷体', value: 'STKaiti'},
			{title: 'cursive', value: 'cursive'},
		],
		dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
		history: true, // 是否需要 撤销重做功能
		onDataChanged: (type, json) => { // 模板发生改变回调
			console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
			console.log(json); // 返回 template
		},
		onUpdateError: (e) => { // 更新失败回调
			console.log(e);
		},
		
		
  })
  



...
js中，动态添加我们的打印内容
javascript 复制代码 
var panel = printTemplate.value.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 });
	//文本
	panel.addPrintText({ options: { width: 140, height: 15, top: 20, left: 20, title: 'hiprint插件手动添加text', textAlign: 'center' } });
	//条形码
	panel.addPrintText({ options: { width: 140, height: 35, top: 40, left: 20, title: '123456', textType: 'barcode' } });
	//二维码
	panel.addPrintText({ options: { width: 35, height: 35, top: 40, left: 165, title: '123456', textType: 'qrcode' } });
	//长文本
	panel.addPrintLongText({ options: { width: 180, height: 35, top: 90, left: 20, title: '长文本：hiprint是一个很好的webjs打印,浏览器在的地方他都可以运行' } });
	//打印
	// printTemplate.value.print({});
给页面上的打印按钮和设计器按钮添加事件

printTemplate.value.print 里面如果上面通过js添加了内容，就不要传参数了

javascript 复制代码 
const handlePrint = () => {
  if (printTemplate.value) {
    printTemplate.value.print({
      // 打印数据
      title: '测试打印',
      content: '这是打印内容...'
    })
  }
}

const showDesigner = () => {
  printTemplate.value.design('#hiprint-designTemplate', {
    // 设计器配置
  }, (designer) => {
    // 设计器回调
    console.log('设计器已加载', designer)
  })
}



</script>

4、引入公共的css文件，app.vue中引入，或者index.html中

javascript 复制代码 
<link rel="stylesheet" type="text/css" media="print" href="/static/print-lock.css">
javascript 复制代码 
<style>
	/*每个页面公共css */
	@import url('static/print-lock.css')
</style>

cdn地址：print-lock.css文件

npmmirror 镜像站

css 复制代码 
@media print {
  body {
    margin: 0px;
    padding: 0px;
  }
}

@page {
  margin: 0;
}

.hiprint-printPaper * {
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}

.hiprint-printPaper *:focus {
  outline: -webkit-focus-ring-color auto 0px;
}

.hiprint-printPaper {
  position: relative;
  padding: 0 0 0 0;
  page-break-after: always;
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -moz-user-select: none; /* Firefox */
  user-select: none;
  overflow-x: hidden;
  overflow: hidden;
}

.hiprint-printPaper .hiprint-printPaper-content {
  position: relative;
}

/* 火狐浏览器打印 第一页过后 重叠问题 */
@-moz-document url-prefix() {
  .hiprint-printPaper .hiprint-printPaper-content {
    position: relative;
    margin-top: 20px;
    top: -20px
  }
}

.hiprint-printPaper.design {
  overflow: visible;
}


.hiprint-printTemplate .hiprint-printPanel {
  page-break-after: always;
}

.hiprint-printPaper, hiprint-printPanel {
  box-sizing: border-box;
  border: 0px;
}

.hiprint-printPanel .hiprint-printPaper:last-child {
  page-break-after: avoid;
}

.hiprint-printTemplate .hiprint-printPanel:last-child {
  page-break-after: avoid;
}

.hiprint-printPaper .hideheaderLinetarget {
  border-top: 0px dashed rgb(201, 190, 190) !important;
}

.hiprint-printPaper .hidefooterLinetarget {
  border-top: 0px dashed rgb(201, 190, 190) !important;
}

.hiprint-printPaper.design {
  border: 1px dashed rgba(170, 170, 170, 0.7);
}

.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {
  overflow: hidden;
  box-sizing: border-box;
}

.design .resize-panel {
  box-sizing: border-box;
  border: 1px dotted;
}

.hiprint-printElement-text {
  background-color: transparent;
  background-repeat: repeat;
  padding: 0 0 0 0;
  border: 0.75pt none rgb(0, 0, 0);
  direction: ltr;
  font-family: 'SimSun';
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  padding-bottom: 0pt;
  padding-left: 0pt;
  padding-right: 0pt;
  padding-top: 0pt;
  text-align: left;
  text-decoration: none;
  line-height: 9.75pt;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-all;
}

.design .hiprint-printElement-text-content {
  border: 1px dashed rgb(206, 188, 188);
  box-sizing: border-box;
}

.hiprint-printElement-longText {
  background-color: transparent;
  background-repeat: repeat;
  border: 0.75pt none rgb(0, 0, 0);
  direction: ltr;
  font-family: 'SimSun';
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  padding-bottom: 0pt;
  padding-left: 0pt;
  padding-right: 0pt;
  padding-top: 0pt;
  text-align: left;
  text-decoration: none;
  line-height: 9.75pt;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-all;
  /*white-space: pre-wrap*/
}


.hiprint-printElement-table {
  background-color: transparent;
  background-repeat: repeat;
  color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
  border-style: none;
  direction: ltr;
  font-family: 'SimSun';
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  padding-bottom: 0pt;
  padding-left: 0pt;
  padding-right: 0pt;
  padding-top: 0pt;
  text-align: left;
  text-decoration: none;
  padding: 0 0 0 0;
  box-sizing: border-box;
  line-height: 9.75pt;
}

.hiprint-printElement-table thead {
  background: #e8e8e8;
  font-weight: 700;
}

table.hiprint-printElement-tableTarget {
  width: 100%;
}

.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {
  border-color: rgb(0, 0, 0);
  /*border-style: none;*/
  /*border: 1px solid rgb(0, 0, 0);*/
  font-weight: normal;
  direction: ltr;
  padding-bottom: 0pt;
  padding-left: 4pt;
  padding-right: 4pt;
  padding-top: 0pt;
  text-decoration: none;
  vertical-align: middle;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-all;
  /*line-height: 9.75pt;
  font-size: 9pt;*/
}

.hiprint-printElement-tableTarget-border-all {
  border: 1px solid;
}
.hiprint-printElement-tableTarget-border-none {
  border: 0px solid;
}
.hiprint-printElement-tableTarget-border-lr {
  border-left: 1px solid;
  border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-left {
  border-left: 1px solid;
}
.hiprint-printElement-tableTarget-border-right {
  border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-tb {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.hiprint-printElement-tableTarget-border-top {
  border-top: 1px solid;
}
.hiprint-printElement-tableTarget-border-bottom {
  border-bottom: 1px solid;
}

.hiprint-printElement-tableTarget-border-td-none td {
  border: 0px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:not(:nth-last-child(-n+2)) {
  border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:not(last-child) {
  border-right: 1px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:last-child {
  border-left: 1px solid;
}
.hiprint-printElement-tableTarget-border-td-all td:last-child:first-child {
  border-left: none;
}

/*.hiprint-printElement-tableTarget tr,*/
.hiprint-printElement-tableTarget td {
  height: 18pt;
}

.hiprint-printPaper .hiprint-paperNumber {
  font-size: 9pt;
}

.design .hiprint-printElement-table-handle {
  position: absolute;
  height: 21pt;
  width: 21pt;
  background: red;
  z-index: 1;
}

.hiprint-printPaper .hiprint-paperNumber-disabled {
  float: right !important;
  right: 0 !important;
  color: gainsboro !important;
}

.hiprint-printElement-vline, .hiprint-printElement-hline {
  border: 0px none rgb(0, 0, 0);

}

.hiprint-printElement-vline {
  border-left: 0.75pt solid #000;
  border-right: 0px none rgb(0, 0, 0) !important;
  border-bottom: 0px none rgb(0, 0, 0) !important;
  border-top: 0px none rgb(0, 0, 0) !important;
}

.hiprint-printElement-hline {
  border-top: 0.75pt solid #000;
  border-right: 0px none rgb(0, 0, 0) !important;
  border-bottom: 0px none rgb(0, 0, 0) !important;
  border-left: 0px none rgb(0, 0, 0) !important;
}

.hiprint-printElement-oval, .hiprint-printElement-rect {
  border: 0.75pt solid #000;
}

.hiprint-text-content-middle {
}

.hiprint-text-content-middle > div {
  display: grid;
  align-items: center;
}

.hiprint-text-content-bottom {
}

.hiprint-text-content-bottom > div {
  display: grid;
  align-items: flex-end;
}

.hiprint-text-content-wrap {
}

.hiprint-text-content-wrap .hiprint-text-content-wrap-nowrap {
  white-space: nowrap;
}

.hiprint-text-content-wrap .hiprint-text-content-wrap-clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.hiprint-text-content-wrap .hiprint-text-content-wrap-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*hi-grid-row */
.hi-grid-row {
  position: relative;
  height: auto;
  margin-right: 0;
  margin-left: 0;
  zoom: 1;
  display: block;
  box-sizing: border-box;
}

.hi-grid-row::after, .hi-grid-row::before {
  display: table;
  content: '';
  box-sizing: border-box;
}

.hi-grid-col {
  display: block;
  box-sizing: border-box;
  position: relative;
  float: left;
  flex: 0 0 auto;
}

.table-grid-row {
  margin-left: -0pt;
  margin-right: -0pt;
}

.tableGridColumnsGutterRow {
  padding-left: 0pt;
  padding-right: 0pt;
}

.hiprint-gridColumnsFooter {
  text-align: left;
  clear: both;
}

更多资料：

1、核心资源：npmmirror 镜像站

2、其他资料：vue-plugin-hiprint：一款基于 Vue 开源的可视化打印编辑工具库，支持可视化设计器、报表设计、元素编辑、可视化打印编辑

相关推荐
OpenTiny社区8 分钟前
告别代码焦虑，单元测试让你代码自信力一路飙升！
前端·github
pe7er18 分钟前
HTTPS：本地开发绕不开的设置指南
前端
晨枫阳26 分钟前
前端VUE项目-day1
前端·javascript·vue.js
江山如画，佳人北望32 分钟前
SLAM 前端
前端
患得患失94938 分钟前
【前端】【Iconify图标库】【vben3】createIconifyIcon 实现图标组件的自动封装
前端
颜酱40 分钟前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
用户95251151401551 小时前
js最简单的解密分析
前端
FogLetter1 小时前
深入浅出React-Router-Dom：从前端路由到SPA架构的华丽转身
前端·react.js
绅士玖1 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀1 小时前
useReducer：React界的"灭霸手套"，一个dispatch搞定所有状态乱局
前端·javascript·react.js
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02KGG转MP3工具|非KGM文件|解密音频03Coze扣子平台完整体验和实践（附国内和国际版对比）04LOT: 通过逻辑增强大型语言模型的零样本Chain-of-Thought推理能力05集群聊天服务器---MySQL数据库的建立06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07身弱武修法：玄之又玄，奇妙之门08使用Ruby接入实时行情API教程09DeepSeek各版本说明与优缺点分析10基于odoo17的设计模式详解---单例模式