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)

            setTimeout(() => {
              // eslint-disable-next-line no-undef
              JsBarcode("#barcode", "1234567890", {
                format: "code128", // 条形码类型
                width: 2, // 条的宽度
                height: 50, // 条形码的高度
              });
            })
            return `
              <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="barcode"></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>
            `
          },
          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
  }
}