temu-plugin/src/components/print/customProvider.js

import { hiprint } from 'vue-plugin-hiprint'
export const customProvider = function (options) {
  const addElementTypes = function (context) {
    context.removePrintElementTypes('customProvider')
    context.addPrintElementTypes('customProvider', [
      new hiprint.PrintElementTypeGroup('', [
        {
          tid: 'providerModule1.html',
          title: 'temu条码',
          data: 'XS888888888',
          type: 'html',
          formatter: function (data, options, templateData) {
            console.log(data, options, templateData)
            const elId = options.elId || 'barCode-' + new Date().getTime()
            const codeWidth = parseInt((options.width - 22) * 0.85)
            options.elId = `${elId}`

            // eslint-disable-next-line no-undef
            $('body').append(`<div id="codewrapper-${elId}" style="width: ${codeWidth}pt">
              <svg id="${elId}" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg>
            </div>`)
            // eslint-disable-next-line no-undef
            JsBarcode('#'+ elId, '96778555251', {
              format: "CODE128B",
              width: 2,
              height:  parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
              margin: 0,
              displayValue: false
            })

            // eslint-disable-next-line no-undef
            const codeHtml = $(`#codewrapper-${elId}`).html()
            // eslint-disable-next-line no-undef
            $(`body>#codewrapper-${elId}`).remove()
            // eslint-disable-next-line no-undef
            const resizeObserver = new ResizeObserver(() => {
              JsBarcode('#'+ elId, '96778555251', {
                format: "CODE128B",
                width: 2,
                height:  parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
                margin: 0,
                displayValue: false
              })
            })

            setTimeout(() => {
              const node = document.getElementById(`temuBarCode-${elId}`)
              if (node) {
                resizeObserver.observe(node)
              }
            }, 0)
            var html = `
              <div class="temuBarCode" id="temuBarCode-${elId}">
                <div class="temuBarCode-top">
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">(AA+AAA)*20PCS</div>
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">AA 20PCS+AAA 20PCS</div>
                </div>
                <div class="temuBarCode-middle">
                  <div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code" style="width: 100%">
                    ${codeHtml}
                  </div>
                </div>
                <div class="temuBarCode-bottom">
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">1034130097</div>
                  <div class="hiprint-printElement-text-content hiprint-printElement-content">Made in China</div>
                </div>
              </div>
            `
            return html
          },
          options: {
            width: 316,
            height: 120,
            elId: ''
          },
          printElementType: {
          }
        },
        {
          tid: 'providerModule1.barcode',
          title: '条形码',
          data: 'XS888888888',
          type: 'text',
          options: {
            field: 'barcode',
            testData: 'XS888888888',
            height: 32,
            fontSize: 12,
            lineHeight: 18,
            textAlign: 'left',
            textType: 'barcode',
            hideTitle: false
          }
        },
        {
          tid: 'providerModule1.qrcode',
          title: '二维码',
          data: 'XS888888888',
          type: 'text',
          options: {
            field: '',
            testData: '',
            height: 32,
            fontSize: 12,
            lineHeight: 18,
            textType: 'qrcode',
            hideTitle: false
          }
        },
        {
          tid: 'providerModule1.image',
          title: '图片',
          data: 'https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200',
          type: 'image'
        }
      ])
    ])
  }
  return {
    addElementTypes
  }
}