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,
      // 导入导出json
      jsonIn: '',
      jsonOut: '',
    }
  },
  computed: {
    curPaperType () {
      let type = 'other'
      let types = this.paperTypes
      for (const key in types) {
        let item = types[key]
        let { width, height } = this.curPaper
        if (item.width === width && item.height === height) {
          type = key
        }
      }
      return type
    }
  },
  methods: {
    changeScale (bol) {

      if (bol) {
        this.scaleValue += 0.1
        if (this.scaleValue > this.scaleMax) this.scaleValue = 5
      } else {
        this.scaleValue -= 0.1
        if (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.paperWidth
      value.height = this.paperHeight
      this.paperPopVisible = false
      this.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/address
      hiprint.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 使用示例