作者：程序员茶叶蛋

链接：https://www.zhihu.com/question/64045126/answer/3427353474

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前言上面文章《Vue快速接入菜鸟打印组件》讲了vue3如何快速集成菜鸟打印组件，这篇讲讲vue3如何集成lodop组件。一、下载并修改LodopFuncs.js在官网 Lodop 官网 下载入门案例，其中有LodopFuncs.js <img src="https://picx.zhimg.com/50/v2-492132b1fd88034d8c241275555dc165_720w.jpg?source=2c26e567" data-size="normal" data-rawwidth="1943" data-rawheight="1089" data-original-token="v2-4f09fca603f7627539c624ba1c513f89" class="origin_image zh-lightbox-thumb" width="1943" data-original="https://picx.zhimg.com/v2-492132b1fd88034d8c241275555dc165_r.jpg?source=2c26e567"/>在这里插入图片描述 我们需要的文件 LodopFuncs.js ，其他案例也可以稍微运行看看。 <img src="https://picx.zhimg.com/50/v2-dbbeaac93db7becec8feced3fe03f9a5_720w.jpg?source=2c26e567" data-size="normal" data-rawwidth="1498" data-rawheight="619" data-original-token="v2-a19eadefa1b7ff553a99df9dc35f5d71" class="origin_image zh-lightbox-thumb" width="1498" data-original="https://pica.zhimg.com/v2-dbbeaac93db7becec8feced3fe03f9a5_r.jpg?source=2c26e567"/>在这里插入图片描述1.1 调整LodopFuncs.js代码， 暴露 getLodop详细见官网-常见问题-vue使用lodop 我们在尾部加上一下代码，暴露Lodop的初始化函数。export { getLodop }

<img src="https://pic1.zhimg.com/50/v2-bef920910ad423698f2c97d6ffd2567c_720w.jpg?source=2c26e567" data-size="normal" data-rawwidth="675" data-rawheight="253" data-original-token="v2-7b21477132022db83a6b07bad67a3b7a" class="origin_image zh-lightbox-thumb" width="675" data-original="https://picx.zhimg.com/v2-bef920910ad423698f2c97d6ffd2567c_r.jpg?source=2c26e567"/>在这里插入图片描述二、自定义useLodop hooks抽取共用的lodop逻辑在项目的hooks 文件夹下创建一个hook。根据自己的项目，按实际情况命名。 这里是 useLodop.ts// 引入上一步骤创建的lodopfuns

import { getLodop } from '@/utils/lodop/LodopFuncs'

import { reactive } from 'vue'

import { ElMessage } from 'element-plus'

export function useLodop() {

  const variable = reactive({

    printerArr: []

  })

  let LODOP = null

  const CheckLodopIsOk = async () => {

    try {

      LODOP = getLodop()

      if (LODOP.VERSION) {

        if (LODOP.CVERSION) {

          return true

        } else {

          return true

        }

      }

    } catch (err) {

      return false

    }

  }

  const printLabel = async (options: {

    strBASE64Code: string

    xxxx: string

    rawRow: {

      paperType: PaperTypeEnum

    }

  }) => {

    LODOP = getLodop()

    if (!LODOP) {

      return ElMessage.warning('请安装/启动Lodop 打印插件')

    }

    LODOP.PRINT_INIT('')

    // 根据打印的类型，获取设置的打印机字符串。根据自己的实际业务修改

    const printerStr = await getPrinter(options?.xxx, options?.rawRow?.paperType)

    if (!LODOP.SET_PRINTER_INDEX(printerStr)) {

      return Promise.resolve(false)

    }

    if ((options.rawRow.paperType ) == 'Label_4X6') {

      LODOP.SET_PRINT_PAGESIZE(1, '100mm', '152.4mm', '') // 纸张方向大小

    } else {

      LODOP.SET_PRINT_PAGESIZE(3, '', '', 'A4') // 纸张方向大小

    }

    LODOP.ADD_PRINT_IMAGE(0, 0, '100%', '100%', options?.strBASE64Code)

    // 设置打印的显示比例

    LODOP.SET_PRINT_STYLEA(0, 'Stretch', 1)

    // LODOP.PREVIEW();

    const isPrintSuccess = LODOP.PRINT()

    return Promise.resolve(!!isPrintSuccess )

  }

  const printA4Paper = async (options: {

    rawObj: Object

    xxxx: string

    TableId: string

  }) => {

    LODOP = getLodop()

    if (!LODOP) {

      return ElMessage.warning('请安装/启动Lodop 打印插件')

    }

    LODOP.PRINT_INIT('')

    const printerStr = await getPrinter(options?.xxxx, 'A4')

    if (!LODOP.SET_PRINTER_INDEX(printerStr)) {

      return Promise.resolve(false)

    }

    // 条形码

    LODOP.ADD_PRINT_BARCODE('20mm', 32, '40%', 100, '128B', `${options.rawObj?.barcode}`)

    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)

    // LODOP.ADD_PRINT_BARCODE(5,734,168,146,"QRCode","1234567890版本7的最大值是122个字符123123");

    LODOP.SET_PRINT_STYLE('FontSize', 12)

    LODOP.SET_PRINT_PAGESIZE(3, 0, 0, 'A4') // 纸张方向大小

    LODOP.SET_PRINT_STYLEA(0, 'TableHeightScope', 3) //高度包含页尾

    //  ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项

    LODOP.SET_PRINT_COPIES(1) // 份数

    // LODOP.SET_PRINT_STYLE('Bold', 1)

    LODOP.SET_PRINT_STYLE('FontSize', '12')

    LODOP.ADD_PRINT_TEXT(

      '20mm',

      '115mm',

      '100mm',

      '5mm',

      `Warehouse:${options.rawObj?.baseWarehouseVo?.name}`

    )

    // 放在某处后面表示每一页都有这个内容 , 类似页眉页脚用法

    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)

   }

    // 注意！！！！  这里ADD_PRINT_HTM 不会分页 ADD_PRINT_TABLE 会自动分页

    if ( xxxx == '多个表格的情况') {

      // 表格部分

    LODOP.ADD_PRINT_HTM(

      '59mm',

      '0mm',

      'RightMargin:2mm',

      '100%',

      document.getElementById(`${options.TableId}`).innerHTML

    )

    } else {

      LODOP.ADD_PRINT_TABLE(

      '59mm',

       '0mm',

       '198mm',

       '275mm',

       document.getElementById(`${options.TableId}`)?.innerHTML

     )

   }

    // 页码

    LODOP.ADD_PRINT_HTM(

      '6mm',

      '90%',

      '100mm',

      20,

      "<span tdata='pageNO'>##</span> of <span tdata='pageCount'> ##</span>"

    )

    LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)

    const isPrintSuccss = LODOP.PRINT() // 直接打印

    return Promise.resolve(!!isPrintSuccss)

  }

  const getPrinterArr = () => {

    variable.printerArr = []

    if (!CheckLodopIsOk()) {

      ElMessage.warning('请安装/启动Lodop打印插件')

      return false

    }

    let counter = LODOP.GET_PRINTER_COUNT() // 获取打印机个数

    for (let i = 0; i < counter; i++) {

      var curPrintName = LODOP.GET_PRINTER_NAME(i)

      variable.printerArr.push({

        name: curPrintName,

        label: curPrintName

      })

    }

    localStorage.setItem('PRINTER_ARR', JSON.stringify(variable.printerArr || []))

    return true

  }

  return {

    getPrinterArr,

    printLabel,

    printA4Paper,

    CheckLodopIsOk

  }

}

上述代码大概暴露4个方法分别为CheckLodopIsOkCheckLodopIsOk ： 判断lodop 插件是否安装、启动了，相应的逻辑处理，一般插件都没开启直接提示就好getPrinterArrgetPrinterArr ：这个是判断有没有可以用打印机，需要安装了lodop插件后，调用他的api 获取。这里获取后储存了起来方便其他页面调用printLabelprintLabel ： 这个方法用来处理base64 数据，打印标签， 其中  LODOP.SET_PRINT_STYLEA(0, 'Stretch', 1) 用来调整显示比例printA4PaperprintA4Paper： 这个是打印A4纸质的表单，常见的仓库里的拣货单等