[Update] Print barcode
This commit is contained in:
adityaalfarison
parent
e1639109c8
commit
ecc9385c28
@ -151,7 +151,7 @@ php artisan serve --host=0.0.0.0 --port=8000
|
||||
- Nyalakan printer.
|
||||
- Temukan kode qr yang akan diprint (misalnya pada halaman brankas)
|
||||
- Klik tombol print pada halaman tersebut
|
||||
- Pilih printer `NIIMBOT B3S_P` dan atur kertas ke ukuran kertas `50mm x 30mm` dan margin `Default`
|
||||
- Pilih printer `NIIMBOT B3S_P` dan atur kertas ke ukuran kertas `40mm x 30mm`, margin `Default`, scale `Default`
|
||||
- Klik print
|
||||
|
||||
---
|
||||
|
||||
@ -1,51 +1,51 @@
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<div class="p-2 border rounded-lg inline-block">
|
||||
<img :src="barcodeUrl" alt="Barcode" class="w-36 h-12" id="barcode-img" />
|
||||
</div>
|
||||
|
||||
<div v-if="item.nama" class="mt-2 text-sm text-gray-700 font-medium">
|
||||
{{ item.nama }}
|
||||
(<span v-if="item.berat" class="mt-1 text-xs text-gray-500">{{ item.berat }} g</span>)
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-3">
|
||||
<button @click="printBarcode" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400 transition">
|
||||
<i class="fas fa-print mr-2"></i>Cetak
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="p-2 border rounded-lg inline-block">
|
||||
<img :src="barcodeUrl" alt="Barcode" class="w-36 h-36" id="barcode-img" />
|
||||
</div>
|
||||
|
||||
<div v-if="item.nama" class="mt-2 text-sm text-gray-700 font-medium">
|
||||
{{ item.nama }}
|
||||
(<span v-if="item.berat" class="mt-1 text-xs text-gray-500">{{ item.berat }} g</span>)
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-3">
|
||||
<button @click="printBarcode" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400 transition">
|
||||
<i class="fas fa-print mr-2"></i>Cetak
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
code: { type: String, required: true },
|
||||
item: { type: Object, required: true },
|
||||
code: { type: String, required: true },
|
||||
item: { type: Object, required: true },
|
||||
});
|
||||
|
||||
const barcodeUrl = computed(() => {
|
||||
if (!props.code) return '';
|
||||
// Using bwip-js API for Code128 barcode
|
||||
return `https://bwipjs-api.metafloor.com/?bcid=code128&text=${encodeURIComponent(props.code)}&scale=2`;
|
||||
if (!props.code) return '';
|
||||
// return `https://bwipjs-api.metafloor.com/?bcid=code128&text=${encodeURIComponent(props.code)}&scale=2`;
|
||||
return `https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=${encodeURIComponent(props.code)}`;
|
||||
});
|
||||
|
||||
const printBarcode = () => {
|
||||
if (!barcodeUrl.value || !props.code) return;
|
||||
if (!barcodeUrl.value || !props.code) return;
|
||||
|
||||
const printWindow = window.open('', '_blank');
|
||||
const kode = props.code || 'N/A';
|
||||
const nama = props.item.nama || 'N/A';
|
||||
const berat = props.item.berat ? `(${props.item.berat} g)` : '';
|
||||
const printWindow = window.open('', '_blank');
|
||||
const kode = props.code || 'N/A';
|
||||
const nama = props.item.nama || 'N/A';
|
||||
const berat = props.item.berat ? `(${props.item.berat} g)` : '';
|
||||
|
||||
printWindow.document.write(`
|
||||
<html>
|
||||
printWindow.document.write(`
|
||||
<html>
|
||||
<head>
|
||||
<title>Print Barcode - ${kode}</title>
|
||||
<style>
|
||||
@page {
|
||||
size: 38mm 25mm;
|
||||
size: 25mm 38mm;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -57,8 +57,8 @@ const printBarcode = () => {
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
width: 38mm;
|
||||
height: 25mm;
|
||||
width: 25mm;
|
||||
height: 38mm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -66,13 +66,13 @@ const printBarcode = () => {
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
width: 38mm;
|
||||
height: 25mm;
|
||||
width: 25mm;
|
||||
height: 38mm;
|
||||
}
|
||||
|
||||
.barcode-container {
|
||||
width: 19mm;
|
||||
height: 25mm;
|
||||
width: 12mm;
|
||||
height: 38mm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -81,13 +81,13 @@ const printBarcode = () => {
|
||||
.barcode-img {
|
||||
transform: rotate(90deg);
|
||||
transform-origin: center;
|
||||
max-height: 19mm;
|
||||
max-width: 23mm;
|
||||
max-height: 12mm;
|
||||
max-width: 12mm;
|
||||
}
|
||||
|
||||
.details-container {
|
||||
width: 19mm;
|
||||
height: 25mm;
|
||||
width: 12mm;
|
||||
height: 38mm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -96,15 +96,17 @@ const printBarcode = () => {
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
width: 23mm;
|
||||
transform: rotate(270deg);
|
||||
transform-origin: center;
|
||||
font-size: 6pt;
|
||||
line-height: 1.1;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
position: absolute;
|
||||
width: 32mm;
|
||||
transform: rotate(270deg);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: center;
|
||||
translate: -50% -50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -124,18 +126,20 @@ const printBarcode = () => {
|
||||
</html>
|
||||
`);
|
||||
|
||||
printWindow.document.close();
|
||||
printWindow.document.close();
|
||||
|
||||
// ✅ Tunggu gambar selesai load
|
||||
const checkImageLoaded = () => {
|
||||
const img = printWindow.document.getElementById('barcode-img');
|
||||
if (img) {
|
||||
img.onload = () => {
|
||||
printWindow.focus();
|
||||
printWindow.print();
|
||||
};
|
||||
if (img && img.complete) {
|
||||
printWindow.focus();
|
||||
printWindow.print();
|
||||
} else {
|
||||
// Fallback
|
||||
printWindow.focus();
|
||||
printWindow.print();
|
||||
setTimeout(checkImageLoaded, 100);
|
||||
}
|
||||
};
|
||||
|
||||
checkImageLoaded();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user