diff --git a/frontend/src/components/BarcodePrint.vue b/frontend/src/components/BarcodePrint.vue index a55e816..61b2d23 100644 --- a/frontend/src/components/BarcodePrint.vue +++ b/frontend/src/components/BarcodePrint.vue @@ -6,6 +6,7 @@ v-for="equipment in equipmentList" :key="equipment.equipment_code" class="qrcode-card" + :data-export-id="equipment.id" >
@@ -113,7 +114,7 @@ const generateQRCodes = async () => { if (canvasElement) { try { await QRCode.toCanvas(canvasElement, equipment.equipment_code, { - width: 160, + width: 176, margin: 1, color: { dark: '#000000', @@ -137,11 +138,21 @@ const generateImages = async (): Promise => { const cardElement = cardElements[i] as HTMLElement if (cardElement) { const canvas = await html2canvas(cardElement, { - scale: 4, + scale: Math.max(window.devicePixelRatio || 1, 3), backgroundColor: '#ffffff', useCORS: true, logging: false, - allowTaint: false + allowTaint: false, + width: 500, + height: 300, + onclone: (clonedDocument) => { + const clonedCard = clonedDocument.querySelector( + `[data-export-id="${equipmentList.value[i].id}"]` + ) as HTMLElement | null + if (clonedCard) { + clonedCard.classList.add('qrcode-card--export') + } + } }) images.push(canvas.toDataURL('image/png', 1.0)) } @@ -256,11 +267,11 @@ onMounted(() => {