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

import { hiprint } from 'vue-plugin-hiprint'
export const customProvider = function (options) {
  var addElementTypes = function (context) {
    context.removePrintElementTypes('customProvider')
    context.addPrintElementTypes('customProvider', [
      new hiprint.PrintElementTypeGroup('', [
        {
          tid: 'providerModule1.html',
          title: 'temu条码',
          data: 'XS888888888',
          type: 'html',
          formatter: function (title, options, templateData) {
            console.log(options, templateData)
            var elId = 'barCode-' + new Date().getTime()
            // eslint-disable-next-line no-undef
            $('body').append('<svg id="' + elId + '"></svg>')

            // eslint-disable-next-line no-undef
            JsBarcode('#'+ elId, '96778555251', {
              format: "CODE128B",
              width: 2,
              height: options.height * 0.6 + 4,
              margin: 0,
              displayValue: false
            })

            // eslint-disable-next-line no-undef
            const codeHtml = $(`#${elId}`).html()
            // eslint-disable-next-line no-undef
            $(`#${elId}`).remove()
            // eslint-disable-next-line no-undef
            $('document').on('resize', `#${elId}`, e => {
              console.log(e)
            });
            var html = `
              <div class="temuBarCode">
                <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">
                    <svg id="${elId}" style="display: block" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice">
                      ${codeHtml}
                    </svg>
                  </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
          }
        },
        {
          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: 'Logo',
          data: 'https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200',
          type: 'image'
        }
      ])
    ])
  }
  return {
    addElementTypes: addElementTypes
  }
}