vue-plugin-hiprint （vue2

页面效果 

<template><div><div class="d-flex flex-column mt5"><div class="d-flex flex-row " style="margin-bottom: 10px;justify-content: center;"><!-- 纸张大小 A3、A4 等 --><div class="paper"><template v-for="(value, type) in paperTypes"><button :class="curPaperType === type ? 'api' : 'info'" @click="setPaper(type, value)" :key="type">{{ type }}</button></template><!-- 自定义纸张 --><button :class="'other' == curPaperType ? 'api' : 'info'" class="auto" @click="showPaperPop">自定义纸张</button><div class="popover"><div class="popover-content d-flex" v-show="paperPopVisible"><div class="mt10" style="font-size: 16px; font-weight: bold">宽X高(mm):</div><div class="d-flex mt10"><input class="input" :value="paperWidth" type="number" placeholder="宽(mm)" /><span class="ml10 mr10">x</span><input class="input" :value="paperHeight" type="number" placeholder="高(mm)" /></div><button class="primary circle-10" style="margin-top: 6px" @click="setPaperOther">确定</button></div></div></div><button class="api circle-10 ml10" @click.stop="rotatePaper"><i class="iconfont sv-rotate" />旋转纸张(宽高互换)</button><button class="api circle-10 ml10" @click.stop="clearPaper"><i class="iconfont sv-clear" />清空纸张</button><button class="secondary circle-10 ml10" @click.stop="print"><i class="iconfont sv-printer" />浏览器打印</button><button class="warning circle-10 ml10" @click.stop="print2">直接打印(需要连接客户端)<i class="iconfont sv-printer" /></button><!-- 缩放 --><div class="d-flex flex-row align-center ml10" style="line-height: 25px;"><el-button icon="el-icon-zoom-out" circle @click="changeScale(false)" size="mini"></el-button><div style="margin: 0 4px; width: 40px">{{ (scaleValue * 100).toFixed(0) }}%</div><el-button icon="el-icon-zoom-in" circle @click="changeScale(true)"  size="mini"></el-button></div></div><div class="d-flex flex-row " :style="'height: '+BodyHeight"><div class="flex-2 left d-flex flex-column"><div class="title">默认样式</div><!-- provider1 的容器; 式 --><div id="provider-container1" class="container rect-printElement-types"></div><div class="title">自定义样式</div><!-- provider2 的容器; --><div id="provider-container2" class="container rect-printElement-types"></div><div class=""></div></div><div class="flex-5 center"><!-- 设计器的 容器 --><div id="hiprint-printTemplate"></div></div><div class="flex-2 right"><!-- 元素参数的 容器 --><div id="PrintElementOptionSetting"></div></div></div><print-preview ref="preView" /></div></div>
</template><script></script><script setup>
import { hiprint } from "vue-plugin-hiprint"
import { provider1 } from "./provider1"
import { provider2 } from "./provider2"
import printPreview from './preview'
import template from "./template"
import { getHiprintPrintTemplate } from "../../../../utils/template-helper"
import { newHiprintPrintTemplate } from '../../../../utils/template-helper'let hiprintTemplate
export default {components: { printPreview },data () {return {// BodyHeight: document.documentElement.scrollHeight - 160 + "px",BodyHeight: document.documentElement.scrollHeight - 140 + "px",options: {config: {tid: "providerModule1.config",title: "参数示例",type: "text",options: {testData: "单据表头",height: 30,fontSize: 16,},},},curPaper: {type: "A4",width: 210,height: 296.6,},paperTypes: {'A3': {width: 420,height: 296.6},'A4': {width: 210,height: 296.6},'A5': {width: 210,height: 147.6},'B3': {width: 500,height: 352.6},'B4': {width: 250,height: 352.6},'B5': {width: 250,height: 175.6}},// 自定义纸张paperPopVisible: false,paperWidth: "220",paperHeight: "80",// 缩放scaleValue: 1,scaleMax: 5,scaleMin: 0.5,// 导入导出jsonjsonIn: '',jsonOut: '',}},computed: {curPaperType () {let type = 'other'let types = this.paperTypesfor (const key in types) {let item = types[key]let { width, height } = this.curPaperif (item.width === width && item.height === height) {type = key}}return type}},methods: {changeScale (bol) {if (bol) {this.scaleValue += 0.1if (this.scaleValue > this.scaleMax) this.scaleValue = 5} else {this.scaleValue -= 0.1if (this.scaleValue < this.scaleMin) this.scaleValue = 0.5}if (hiprintTemplate) {hiprintTemplate.zoom(this.scaleValue)}},tp () {return getHiprintPrintTemplate()},showPaperPop () {this.paperPopVisible = true},setPaper (type, value) {try {if (Object.keys(this.paperTypes).includes(type)) {this.curPaper = { type: type, width: value.width, height: value.height }hiprintTemplate.setPaper(value.width, value.height)} else {this.curPaper = { type: "other", width: value.width, height: value.height }hiprintTemplate.setPaper(value.width, value.height)}} catch (error) {alert(`操作失败: ${error}`)}},setPaperOther () {let value = {}value.width = this.paperWidthvalue.height = this.paperHeightthis.paperPopVisible = falsethis.setPaper("other", value)},buildLeftElement () {$("#provider-container1").empty()hiprint.PrintElementTypeManager.build($("#provider-container1"), "providerModule1")$("#provider-container2").empty()hiprint.PrintElementTypeManager.build($("#provider-container2"), "providerModule2")},buildDesigner () {$("#hiprint-printTemplate").empty()$("#hiprint-printTemplate").empty()hiprintTemplate = new hiprint.PrintTemplate({template: template,settingContainer: "#PrintElementOptionSetting",})hiprintTemplate.design("#hiprint-printTemplate")},print () {console.log("dsdddddddddddddd")hiprint.refreshPrinterList((list) => {console.log('refreshPrinterList')console.log(list)})hiprint.getAddress('ip', (data) => {console.log('ip')console.log(data)})hiprint.getAddress('ipv6', (data) => {console.log('ipv6')console.log(data)})hiprint.getAddress('mac', (data) => {console.log('mac')console.log(data)})hiprint.getAddress('dns', (data) => {console.log('dns')console.log(data)})hiprint.getAddress('all', (data) => {console.log('all')console.log(data)})// 各个平台不一样, 用法见: https://www.npmjs.com/package/addresshiprint.getAddress('interface', (data) => {console.log('interface')console.log(data)}, 'IPv4', 'eth1')this.$refs.preView.show(hiprintTemplate, this.printData)},print2 () {if (hiprint.hiwebSocket.opened) {hiprintTemplate.print2(this.printData)} else {alert("请先连接客户端(刷新网页), 然后再点击「直接打印」")}},rotatePaper () {hiprintTemplate.rotatePaper()},clearPaper () {hiprintTemplate.clear()},exportJson () {let json = hiprintTemplate.getJson()console.log(json)alert("导出成功! 请查看控制台输出")},exportJsonTid () {let json = hiprintTemplate.getJsonTid()console.log(json)alert("导出成功! 请查看控制台输出")}},mounted () {this.buildDesigner()hiprint.init({providers: [provider1(this.options), provider2(this.options)],})this.buildLeftElement()}
}
</script><style >.primary {background: purple;color: #fff;
}
.info {color: #000;background: none;
}
.info:hover {color: purple;border-color: purple;}
.secondary {background: #1976d2;color: #fff;
}
.warning {background-color: #e57171;color: #fff;
}.circle,
.circle-4 {border: 1px solid #cdcdcd;border-radius: 4px !important;
}
.circle-10 {border: 1px solid #cdcdcd;border-radius: 4px !important;
}
/* 重写默认的一个样式 */
.rect-printElement-types .hiprint-printElement-type > li > ul > li > a {color: #6a98d3 !important;height:auto
}/* 自定义 provider 构建样式 */
.custom-style-types .hiprint-printElement-type {display: block;
}
.custom-style-types .hiprint-printElement-type {padding: 0 0 0 0;list-style: none;
}
.custom-style-types .hiprint-printElement-type > li > .title {display: block;padding: 4px 0px;color: rgb(0, 58, 230);clear: both;
}
.custom-style-types .hiprint-printElement-type > li > ul {padding: 0 0 0 0;display: block;list-style: none;
}
.custom-style-types .hiprint-printElement-type > li > ul > li {display: block;width: 50%;float: left;max-width: 100px;
}
.custom-style-types .hiprint-printElement-type > li > ul > li > a {padding: 12px 6px;color: #1296db;text-decoration: none;background: #fff;border: 1px solid #ddd;margin-right: 5px;width: 95%;max-width: 100px;display: inline-block;text-align: center;margin-bottom: 7px;box-sizing: border-box;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 4px;box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
}
.hiprint-printPanel .hiprint-printPaper{background-color: #fff;
}
</style><style scoped>
::v-deep .el-dialog__header {padding: 0px;
}
::v-deep .el-dialog__body{padding: 0px !important
}
/* api按钮 */
.api {background: #00acc1;color: #fff;
}
.auto {width: auto !important;
}
/* 纸张 */
.paper {margin-right: 10px;
}
.paper button:not(class*='auto') {width: 60px !important;
}
/* 多个 button 间距 */
.paper button  {margin-left: -1px;border: 1px solid #ffffff;line-height: 22px;background-color: #328db1;border-radius: 4px;}
/* .paper button:first-child:last-child {border-radius: 4px;border: 1px solid #ffffff;line-height: 22px;background-color: #328db1;border-radius: 4px;
} */
/* 两边的 btn 圆角 */
/* .paper button:first-child:not(:last-child) {border-top-left-radius: 4px;border-bottom-left-radius: 4px;
}
.paper button:last-child:not(:first-child) {border-top-right-radius: 4px;border-bottom-right-radius: 4px;
} */
.popover {position: absolute;margin-top: 10px;z-index: 10;
}
.popover .popover-content {background: white;border-radius: 4px;padding: 10px 14px;box-shadow: 2px 2px 2px 4px rgb(128 0 128 / 20%);
}
.popover .input {height: 24px;padding: 2px 4px;
}
.popover .input:hover {border-radius: 4px;
}/* 区域 */
.left {background: white;border-radius: 4px;border: 1px solid #d9d9d9;box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);overflow: auto;
}
.left .container {height: 50%;overflow: auto;padding: 0 7%;
}
.left .container[id*='provider-container2'] {margin-bottom: 10px;
}
.center {background-color: #f3f3f3;margin: 0 10px;/* background: white; */border-radius: 4px;border: 1px solid #d9d9d9;padding: 20px;box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);overflow: auto;
}.right {background: white;border-radius: 4px;border: 1px solid #d9d9d9;padding: 10px 0;box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);overflow: auto;
}
/* 左侧拖拽元素样式 */
.title {font-size: 16px;font-weight: 500;margin: 4px 0 4px 10px;background: #ededed;text-align: center;
}
.item {display: flex;flex-direction: column;align-items: center;background: white;padding: 4px 10px;margin: 10px 8px 4px 8px;width: 38%;min-height: 60px;border-radius: 4px;box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
}
.item .iconfont {font-size: 1.5rem;
}
.item span {font-size: 14px;
}
</style>

参考链接：GitHub - CcSimple/vue-plugin-hiprint-start: vue-plugin-hiprint 使用示例