1.在vue3環境中，用到插件qrcodejs2-fix

import QRCode from 'qrcodejs2-fix';

2.封裝基礎組件 selfQrcode

import SelfQrcode from '@/components/selfPack/selfQrcode'; app.component('SelfQrcode', SelfQrcode); <template><div style="display: flex; flex-direction: column; align-items: center"><div :id="'qrcode' + props.value" style="width: 100%; height: 100%"></div><!-- <div style="font-size: 12px; scale: 0.5; width: 100%; white-space: nowrap; margin-left: -50%">{{ props.value }}</div> --></div> </template><script setup> import { ref, onMounted, nextTick, watch } from 'vue'; import QRCode from 'qrcodejs2-fix'; //在需要使用的vue文件中導入即可 const props = defineProps({value: String,type: String, }); watch(props, () => {draw(); }); function draw() {document.getElementById('qrcode' + props.value).innerHTML = '';new QRCode(document.getElementById('qrcode' + props.value), {text: props.value,//需要編碼的文字內容或者URLwidth: 60, //二維碼寬height: 60, //二維碼高}); } onMounted(() => {nextTick(() => {draw();}); }); </script>

3.在此基礎上封裝業務組件selfQrGoodsPrint

import SelfQrGoodsPrint from '@/components/selfPack/selfQrGoodsPrint'; app.component('SelfQrGoodsPrint', SelfQrGoodsPrint); <template><div><iframe style="display: none" ref="iframeRef" :srcdoc="barcodeCon" frameborder="0"></iframe><div id="Qrbarcode" style="display: none"><div v-for="item in list" :value="item"><div style="display: flex; justify-content: space-between; margin: 0; font-size: 13px; width: 100%"><div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ item.companyName }}</div></div><div style="display: flex; justify-content: space-between; margin: 0; font-size: 13px; width: 100%"><div style="margin: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">貨品:{{ item.materialName }}</div></div><div style="display: flex; justify-content: space-between; margin: 0; font-size: 13px; width: 100%"><div style="margin: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">條碼:{{ item.serialNumber }}</div></div><div style="width: 100%; display: flex; margin-top: 10px"><div style="margin-right: 10px; width: calc(100% - 60px)"><p style="margin: 0; font-size: 12px">編碼:{{ item.materialNo }}</p><!-- <p style="margin: 0; font-size: 12px">貨主名稱:{{ item.companyName }}</p> --><p style="margin: 0; font-size: 12px">類型:{{ item.materialType) }}</p><p style="margin: 0; font-size: 12px">單位:{{ item.unit }}</p></div><self-qrcodestyle="margin: 10px; width: 60px; margin-top: 0":key="item + new Date()":value="item.serialNumber"></self-qrcode></div></div></div></div> </template><script setup> import { ref, onMounted, nextTick, watch } from 'vue'; const props = defineProps({list: {type: Array,default: [],}, }); const barcodeCon = ref(''); const iframeRef = ref(null);function print() {barcodeCon.value = document.getElementById('Qrbarcode').innerHTML;setTimeout(function () {iframeRef.value.contentWindow.print();}, 100); } defineExpose({print, }); </script> <style scoped> p {font-size: 12px;margin: 0;line-height: 12px; } </style>

4.頁面調用

<self-qrGoodsPrint :list="printList" ref="qrgoodsPrintRef"></self-qrGoodsPrint> function handlePrintAll() {printList.value = [];//這邊給printList賦具體值setTimeout(function () {qrgoodsPrintRef.value.print();}, 100); }

總結

以上是生活随笔為你收集整理的vue3生成二维码打印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。