前言：

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

更多資料：

1、核心資源：npmmirror 鏡像站

2、其他資料：vue-plugin-hiprint：一款基于 Vue 開源的可視化打印編輯工具庫，支持可視化設計器、報表設計、元素編輯、可視化打印編輯