使用生成条形码并打印和vue-print-nb以及报错问题的解决

npm install vue3-print-nb  //重新安装

declare module 'vue3-print-nb' {
   const install: (app: App) => void
   const print: (options?: PrintOptions) => void
   export default { install, print }
  }

 <div class="preview-area" id="printTest">
            <div v-for="(item, index) in data" :key="index">
                <svg :ref="el => setBarcodeRef(el, index)"></svg>
                <p style="page-break-after: always"></p>
            </div>
        </div>
      <el-button v-print="printObj" ref="printBtn" style="display: none;"></el-button>
</div>


const data = ref([])
const barcodeRefs = ref([])
const printBtn = ref(null)

const printObj = reactive({
    id: 'printTest',
    beforeOpenCallback(vue) {
        vue.printLoading = true
    },
    openCallback(vue) {
        vue.printLoading = false
    },
    closeCallback(vue) {
        console.log('关闭了打印工具')
    }
})
//获取每一个对应的svg
const setBarcodeRef = (el, index) => {
    barcodeRefs.value[index] = el
}
//list为数据源    调用showPrint进行数据调用
const showPrint = async (list) => {
    data.value = list
    await nextTick()
    await generateBarcode(list)
    // 生成完成后自动触发打印
    await nextTick()
    printBtn.value.$el.click()
}

const generateBarcode = async (list) => {
    try {
        list.forEach((item, index) => {
            if(barcodeRefs.value[index]) {
                JsBarcode(barcodeRefs.value[index], item.LocationCode, {
                    format: "CODE128",
                    lineColor: "#000",
                    width: 2,
                    height: 60,
                    displayValue: true,
                    fontSize: 16,
                    margin: 10
                });
            }
        })
    } catch (error) {
        console.error('生成条形码失败:', error);
    }
};