前言：

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

官网地址：gitee

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

实现效果：

预览打印内容：

实现步骤：

1、安装插件

npm install vue-plugin-hiprint hiprint

2、main.js中配置

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：页码，支持打印多页

<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元素

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

<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 默认1history: true, // 是否需要 撤销重做功能onDataChanged: (type, json) => { // 模板发生改变回调console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转console.log(json); // 返回 template},onUpdateError: (e) => { // 更新失败回调console.log(e);},})...

js中，动态添加我们的打印内容

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添加了内容，就不要传参数了

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中

<link rel="stylesheet" type="text/css" media="print" href="/static/print-lock.css">

<style>/*每个页面公共css */@import url('static/print-lock.css')
</style>

cdn地址：print-lock.css文件

npmmirror 镜像站

@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;
}