Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Print barcode

Browse Source
This commit is contained in:
adityaalfarison 2025-10-16 11:12:27 +07:00
parent e1639109c8
commit ecc9385c28
2 changed files with 57 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -151,7 +151,7 @@ php artisan serve --host=0.0.0.0 --port=8000
- Nyalakan printer. - Nyalakan printer.
- Temukan kode qr yang akan diprint (misalnya pada halaman brankas) - Temukan kode qr yang akan diprint (misalnya pada halaman brankas)
- Klik tombol print pada halaman tersebut - 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 - Klik print
--- ---

108
resources/js/components/PrintBarcode.vue
View File

@ -1,51 +1,51 @@
<template> <template>
<div class="text-center"> <div class="text-center">
<div class="p-2 border rounded-lg inline-block"> <div class="p-2 border rounded-lg inline-block">
<img :src="barcodeUrl" alt="Barcode" class="w-36 h-12" id="barcode-img" /> <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> </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> </template>
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from 'vue';
const props = defineProps({ const props = defineProps({
code: { type: String, required: true }, code: { type: String, required: true },
item: { type: Object, required: true }, item: { type: Object, required: true },
}); });
const barcodeUrl = computed(() => { const barcodeUrl = computed(() => {
if (!props.code) return ''; 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`;
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 = () => { const printBarcode = () => {
if (!barcodeUrl.value || !props.code) return; if (!barcodeUrl.value || !props.code) return;
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
const kode = props.code || 'N/A'; const kode = props.code || 'N/A';
const nama = props.item.nama || 'N/A'; const nama = props.item.nama || 'N/A';
const berat = props.item.berat ? `(${props.item.berat} g)` : ''; const berat = props.item.berat ? `(${props.item.berat} g)` : '';
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print Barcode - ${kode}</title> <title>Print Barcode - ${kode}</title>
<style> <style>
@page { @page {
size: 38mm 25mm; size: 25mm 38mm;
margin: 0; margin: 0;
} }
@ -57,8 +57,8 @@ const printBarcode = () => {
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
width: 38mm; width: 25mm;
height: 25mm; height: 38mm;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -66,13 +66,13 @@ const printBarcode = () => {
.label { .label {
display: flex; display: flex;
width: 38mm; width: 25mm;
height: 25mm; height: 38mm;
} }
.barcode-container { .barcode-container {
width: 19mm; width: 12mm;
height: 25mm; height: 38mm;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -81,13 +81,13 @@ const printBarcode = () => {
.barcode-img { .barcode-img {
transform: rotate(90deg); transform: rotate(90deg);
transform-origin: center; transform-origin: center;
max-height: 19mm; max-height: 12mm;
max-width: 23mm; max-width: 12mm;
} }
.details-container { .details-container {
width: 19mm; width: 12mm;
height: 25mm; height: 38mm;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -96,15 +96,17 @@ const printBarcode = () => {
} }
.item-name { .item-name {
display: block;
width: 23mm;
transform: rotate(270deg);
transform-origin: center;
font-size: 6pt; font-size: 6pt;
line-height: 1.1; line-height: 1.1;
text-align: left;
white-space: normal; white-space: normal;
word-wrap: break-word; word-wrap: break-word;
position: absolute;
width: 32mm;
transform: rotate(270deg);
top: 50%;
left: 50%;
transform-origin: center;
translate: -50% -50%;
} }
</style> </style>
</head> </head>
@ -124,18 +126,20 @@ const printBarcode = () => {
</html> </html>
`); `);
printWindow.document.close(); printWindow.document.close();
// ✅ Tunggu gambar selesai load
const checkImageLoaded = () => {
const img = printWindow.document.getElementById('barcode-img'); const img = printWindow.document.getElementById('barcode-img');
if (img) { if (img && img.complete) {
img.onload = () => { printWindow.focus();
printWindow.focus(); printWindow.print();
printWindow.print();
};
} else { } else {
// Fallback setTimeout(checkImageLoaded, 100);
printWindow.focus();
printWindow.print();
} }
};
checkImageLoaded();
}; };
</script> </script>