Etiket Basma Sorunu

13-08-2026, 19:22:07

#1

Dodurgali

Son aşamada %95 ile bitirdim işlemi küçük problem ile çözüldü. Masaüstü uygulamasa çok zorun olmuyor ama tarayıcı üzerinden etiket makinasına etiket basılmıyor maalesef. Herkese teşekkürler.

Bu etiket makinası ile ilgili ciddi bir problemim var, hiç bir şekilde 5 etiketi yan yana çıkartamadım. Kodları versem bunu düzeltebilecek biri var mı?
13-08-2026, 19:27:28

#2

kimsesizdogan

düşey yatay diye seçimi değişirseniz düzelir hocam

13-08-2026, 19:29:27

kimsesizdogan adlı üyeden alıntı: mesajı görüntüle

düşey yatay diye seçimi değişirseniz düzelir hocam

import React from 'react';
import { Printer } from 'lucide-react';
import { generateBarcodeSvg, formatBarcodeText } from '../utils/barcode';

interface BarcodeDisplayProps {
  barcode: string;
  productName?: string;
  priceTry?: number;
  unit?: string;
  size?: 'sm' | 'md' | 'lg';
}

const formatProductName = (name: string): string => {
  if (!name) return 'ÜRÜN';
  const upper = name.toUpperCase();
  return upper.length > 12 ? upper.substring(0, 12) : upper;
};

export default function BarcodeDisplay({
  barcode,
  productName = 'Ürün',
  unit = 'Adet',
  size = 'md'
}: BarcodeDisplayProps) {
  if (!barcode) return <span className="text-slate-400 italic">Barkod Yok</span>;

  const svgMarkup = generateBarcodeSvg(barcode, size === 'sm' ? 40 : 50);
  const displayBarcode = formatBarcodeText(barcode);

  const handlePrintLabel = async (e: React.MouseEvent) => {
    e.stopPropagation();
    if (typeof window !== 'undefined' && window.innerWidth <= 1024) {
      return;
    }

    let shopTitle = 'SOSYAL MEGAPIXEL NALBUR';
    try {
      const res = await fetch('/api/settings');
      const data = await res.json();
      if (data.success && data.settings) {
        shopTitle = data.settings.bayiCompanyName || data.settings.shopName || shopTitle;
      }
    } catch (err) {
      console.error(err);
    }

    const rawName = productName && productName !== 'Ürün' ? productName : shopTitle;
    const labelTitle = formatProductName(rawName);

    const svgStringWithInlineStyles = svgMarkup.replace(
      '<svg',
      '<svg style="width: 100%; height: 100%;"'
    );

    const iframe = document.createElement('iframe');
    iframe.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;';
    document.body.appendChild(iframe);

    const doc = iframe.contentWindow?.document;
    if (!doc) return;

    doc.open();
    doc.write(`
      <html>
        <head>
          <title>Barkod Etiketi - ${barcode}</title>
          <style>
            @page {
              size: 40mm 105mm;
              margin: 0;
            }
            * {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
            }
            body {
              margin: 0;
              padding: 0;
              font-family: 'Segoe UI', Arial, sans-serif;
              background-color: #fff;
              color: #000;
              width: 40mm;
              height: 105mm;
              display: flex;
              align-items: center;
              justify-content: center;
              -webkit-print-color-adjust: exact;
              print-color-adjust: exact;
            }
            .label-container {
              width: 38mm;
              height: 103mm;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: center;
              padding: 2mm 1mm;
            }
            .product-title {
              font-size: 8pt;
              font-weight: 900;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 36mm;
              line-height: 1.2;
              text-transform: uppercase;
              color: #000;
              text-align: center;
              margin-bottom: 2mm;
              writing-mode: vertical-rl;
              text-orientation: mixed;
              transform: rotate(180deg);
              height: 25mm;
            }
            .barcode-box {
              width: 30mm;
              height: 50mm;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .barcode-box svg {
              width: 100% !important;
              height: 100% !important;
              display: block;
              transform: rotate(-90deg);
            }
            .bottom-info {
              width: 36mm;
              text-align: center;
              font-size: 7pt;
              font-weight: 900;
              color: #000;
              margin-top: 2mm;
              writing-mode: vertical-rl;
              text-orientation: mixed;
              transform: rotate(180deg);
              height: 20mm;
            }
            .code-num {
              font-family: 'Courier New', monospace;
              font-weight: 900;
              letter-spacing: 0.5px;
            }
          </style>
        </head>
        <body>
          <div class="label-container">
            <div class="product-title">${labelTitle}</div>
            <div class="barcode-box">${svgStringWithInlineStyles}</div>
            <div class="bottom-info">
              <span class="code-num">${displayBarcode}</span>
            </div>
          </div>
          <script>
            window.onload = function() {
              window.print();
              setTimeout(function() {
                window.frameElement.remove();
              }, 100);
            };
          </script>
        </body>
      </html>
    `);
    doc.close();
  };

  const containerClasses = size === 'sm' 
    ? 'w-28 h-10' 
    : size === 'lg' 
      ? 'w-44 h-16' 
      : 'w-36 h-12';

  return (
    <div className="flex flex-col items-center gap-1 bg-slate-50 p-2 rounded-xl border border-slate-200/60 shadow-3xs group relative">
      <div 
        className={`${containerClasses} flex items-center justify-center`}
        dangerouslySetInnerHTML={{ __html: svgMarkup }} 
      />
      <span className="font-mono font-bold text-[10px] text-slate-800 tracking-wider">
        {displayBarcode}
      </span>

      {!(typeof window !== 'undefined' && window.innerWidth <= 1024) && (
        <button
          type="button"
          onClick={handlePrintLabel}
          className="absolute inset-0 bg-slate-900/80 text-white rounded-xl opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 text-[10px] font-black

Bunu düzeltebilir misin.

13-08-2026, 19:33:39

#4

muratshop

bide bunu deneyin hocam

import React from 'react';
import { Printer } from 'lucide-react';
import { generateBarcodeSvg, formatBarcodeText } from '../utils/barcode';

interface BarcodeDisplayProps {
barcode: string;
productName?: string;
priceTry?: number;
unit?: string;
size?: 'sm' | 'md' | 'lg';
}

const formatProductName = (name: string): string => {
if (!name) return 'ÜRÜN';
const upper = name.toUpperCase();
return upper.length > 12 ? upper.substring(0, 12) : upper;
};

export default function BarcodeDisplay({
barcode,
productName = 'Ürün',
unit = 'Adet',
size = 'md'
}: BarcodeDisplayProps) {
if (!barcode) return <span className="text-slate-400 italic">Barkod Yok</span>;

const svgMarkup = generateBarcodeSvg(barcode, size === 'sm' ? 40 : 50);
const displayBarcode = formatBarcodeText(barcode);

const handlePrintLabel = async (e: React.MouseEvent) => {
e.stopPropagation();
if (typeof window !== 'undefined' && window.innerWidth <= 1024) {
return;
}

let shopTitle = 'SOSYAL MEGAPIXEL NALBUR';
try {
const res = await fetch('/api/settings');
const data = await res.json();
if (data.success && data.settings) {
shopTitle = data.settings.bayiCompanyName || data.settings.shopName || shopTitle;
}
} catch (err) {
console.error(err);
}

const rawName = productName && productName !== 'Ürün' ? productName : shopTitle;
const labelTitle = formatProductName(rawName);

const svgStringWithInlineStyles = svgMarkup.replace(
'<svg',
'<svg style="width: 100%; height: 100%;"'
);

const iframe = document.createElement('iframe');
iframe.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0; border:0;';
document.body.appendChild(iframe);

const doc = iframe.contentWindow?.document;
if (!doc) return;

// 5 adet etiketi yan yana basmak için HTML'i çoğaltıyoruz
const labelsHtml = Array(5).fill(`
<div class="label-container">
<div class="product-title">${labelTitle}</div>
<div class="barcode-box">${svgStringWithInlineStyles}</div>
<div class="bottom-info">
<span class="code-num">${displayBarcode}</span>
</div>
</div>
`).join('');

doc.open();
doc.write(`
<html>
<head>
<title>Barkod Etiketi - ${barcode}</title>
<style>
@page {
size: 105mm 40mm; /* YATAY SAYFA DÜZENİ: Genişlik 105, Yükseklik 40 */
margin: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Arial, sans-serif;
background-color: #fff;
color: #000;
width: 105mm;
height: 40mm;
display: flex;
flex-direction: row; /* ETİKETLERİ YAN YANA DİZER */
align-items: center;
justify-content: space-between; /* 5 etiketi aralıklı dağıtır */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.label-container {
width: 20mm; /* 105mm içine 5 adet sığması için genişlik */
height: 38mm;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1mm;
overflow: hidden;
}
.product-title {
font-size: 6pt;
font-weight: 900;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
text-transform: uppercase;
color: #000;
text-align: center;
margin-bottom: 2mm;
/* ESKİ KODDAKİ DÖNDÜRME (ROTATE) İŞLEMLERİ KALDIRILDI */
}
.barcode-box {
width: 18mm;
height: 15mm;
display: flex;
align-items: center;
justify-content: center;
}
.barcode-box svg {
width: 100% !important;
height: 100% !important;
display: block;
/* ESKİ KODDAKİ -90 DERECE DÖNDÜRME KALDIRILDI */
}
.bottom-info {
width: 100%;
text-align: center;
font-size: 5pt;
font-weight: 900;
color: #000;
margin-top: 1mm;
}
.code-num {
font-family: 'Courier New', monospace;
font-weight: 900;
letter-spacing: 0.5px;
}
</style>
</head>
<body>
${labelsHtml}
<script>
window.onload = function() {
window.print();
setTimeout(function() {
window.frameElement.remove();
}, 100);
};
</script>
</body>
</html>
`);
doc.close();
};

const containerClasses = size === 'sm'
? 'w-28 h-10'
: size === 'lg'
? 'w-44 h-16'
: 'w-36 h-12';

return (
<div className="flex flex-col items-center gap-1 bg-slate-50 p-2 rounded-xl border border-slate-200/60 shadow-3xs group relative">
<div
className={`${containerClasses} flex items-center justify-center`}
dangerouslySetInnerHTML={{ __html: svgMarkup }}
/>
<span className="font-mono font-bold text-[10px] text-slate-800 tracking-wider">
{displayBarcode}
</span>

{!(typeof window !== 'undefined' && window.innerWidth <= 1024) && (
<button
type="button"
onClick={handlePrintLabel}
className="absolute inset-0 bg-slate-900/80 text-white rounded-xl opacity-0 group-hoverpacity-100 transition-opacity flex items-center justify-center gap-1.5 text-[10px] font-black"
>
<Printer size={16} />
Yazdır (5'li)
</button>
)}
</div>
);
}

13-08-2026, 19:38:51

php_bot

import React from 'react';
import { Printer } from 'lucide-react';
import { generateBarcodeSvg, formatBarcodeText } from '../utils/barcode';

interface BarcodeDisplayProps {
  barcode: string;
  productName?: string;
  priceTry?: number;
  unit?: string;
  size?: 'sm' | 'md' | 'lg';
}

const formatProductName = (name: string): string => {
  if (!name) return 'ÜRÜN';
  const upper = name.toUpperCase();
  return upper.length > 22 ? upper.substring(0, 22) : upper;
};

export default function BarcodeDisplay({
  barcode,
  productName = 'Ürün',
  unit = 'Adet',
  size = 'md'
}: BarcodeDisplayProps) {
  if (!barcode) return <span className="text-slate-400 italic">Barkod Yok</span>;

  const svgMarkup = generateBarcodeSvg(barcode, size === 'sm' ? 40 : 50);
  const displayBarcode = formatBarcodeText(barcode);

  const handlePrintLabel = async (e: React.MouseEvent) => {
    e.stopPropagation();
    if (typeof window !== 'undefined' && window.innerWidth <= 1024) {
      return;
    }

    let shopTitle = 'SOSYAL MEGAPIXEL NALBUR';
    try {
      const res = await fetch('/api/settings');
      const data = await res.json();
      if (data.success && data.settings) {
        shopTitle = data.settings.bayiCompanyName || data.settings.shopName || shopTitle;
      }
    } catch (err) {
      console.error(err);
    }

    const rawName = productName && productName !== 'Ürün' ? productName : shopTitle;
    const labelTitle = formatProductName(rawName);

    const svgStringWithInlineStyles = svgMarkup.replace(
      '<svg',
      '<svg style="width: 100%; height: 100%;"'
    );

    // 105mm rulo, 5 kolon. Her etiket 21mm (genişlik) x 40mm (yükseklik).
    // Kağıt 200mm / etiket 40mm genişlikteyse: PAGE_W_MM=200, LABEL_W_MM=40 yapın.
    const COLS = 5;
    const PAGE_W_MM = 105;
    const PAGE_H_MM = 40;
    const LABEL_W_MM = PAGE_W_MM / COLS;

    const labelHtml = Array.from({ length: COLS }, () => `
      <div class="label">
        <div class="label-inner">
          <div class="product-title">${labelTitle}</div>
          <div class="barcode-box">${svgStringWithInlineStyles}</div>
          <div class="bottom-info">
            <span class="code-num">${displayBarcode}</span>
          </div>
        </div>
      </div>
    `).join('');

    const iframe = document.createElement('iframe');
    iframe.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;';
    document.body.appendChild(iframe);

    const doc = iframe.contentWindow?.document;
    if (!doc) return;

    doc.open();
    doc.write(`
      <html>
        <head>
          <title>Barkod Etiketi - ${barcode}</title>
          <style>
            @page {
              size: ${PAGE_W_MM}mm ${PAGE_H_MM}mm;
              margin: 0;
            }
            * {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
            }
            html, body {
              margin: 0;
              padding: 0;
              width: ${PAGE_W_MM}mm;
              height: ${PAGE_H_MM}mm;
              overflow: hidden;
              font-family: 'Segoe UI', Arial, sans-serif;
              background: #fff;
              color: #000;
              -webkit-print-color-adjust: exact;
              print-color-adjust: exact;
            }
            .sheet {
              width: ${PAGE_W_MM}mm;
              height: ${PAGE_H_MM}mm;
              display: flex;
              flex-direction: row;
              align-items: stretch;
              page-break-after: avoid;
              page-break-inside: avoid;
            }
            .label {
              width: ${LABEL_W_MM}mm;
              height: ${PAGE_H_MM}mm;
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              flex: 0 0 ${LABEL_W_MM}mm;
            }
            /* 21mm kolon dar; barkod 40mm kenarı kullanacak şekilde 90° döner */
            .label-inner {
              width: ${PAGE_H_MM - 2}mm;
              height: ${LABEL_W_MM - 2}mm;
              transform: rotate(-90deg);
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 0.6mm;
            }
            .product-title {
              font-size: 6.5pt;
              font-weight: 900;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: ${PAGE_H_MM - 4}mm;
              line-height: 1.1;
              text-transform: uppercase;
              text-align: center;
            }
            .barcode-box {
              width: ${PAGE_H_MM - 6}mm;
              height: 11mm;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .barcode-box svg {
              width: 100% !important;
              height: 100% !important;
              display: block;
            }
            .bottom-info {
              font-size: 5.5pt;
              font-weight: 900;
              text-align: center;
              white-space: nowrap;
            }
            .code-num {
              font-family: 'Courier New', monospace;
              font-weight: 900;
              letter-spacing: 0.3px;
            }
            @media print {
              html, body, .sheet {
                width: ${PAGE_W_MM}mm !important;
                height: ${PAGE_H_MM}mm !important;
              }
            }
          </style>
        </head>
        <body>
          <div class="sheet">
            ${labelHtml}
          </div>
          <script>
            window.onload = function() {
              window.print();
              setTimeout(function() {
                window.frameElement.remove();
              }, 500);
            };
          </script>
        </body>
      </html>
    `);
    doc.close();
  };

  const containerClasses = size === 'sm'
    ? 'w-28 h-10'
    : size === 'lg'
      ? 'w-44 h-16'
      : 'w-36 h-12';

  return (
    <div className="flex flex-col items-center gap-1 bg-slate-50 p-2 rounded-xl border border-slate-200/60 shadow-3xs group relative">
      <div
        className={`${containerClasses} flex items-center justify-center`}
        dangerouslySetInnerHTML={{ __html: svgMarkup }}
      />
      <span className="font-mono font-bold text-[10px] text-slate-800 tracking-wider">
        {displayBarcode}
      </span>

      {!(typeof window !== 'undefined' && window.innerWidth <= 1024) && (
        <button
          type="button"
          onClick={handlePrintLabel}
          className="absolute inset-0 bg-slate-900/80 text-white rounded-xl opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 text-[10px] font-black uppercase tracking-widest"
        >
          <Printer size={12} /> Yazdır
        </button>
      )}
    </div>
  );
}

Yazdırırken

Kenar boşluğu: Yok / None
Ölçek: %100 (sayfaya sığdırma)
Kağıt: 105 × 40 mm (veya yazıcıdaki eşdeğer özel boyut)

Etiketler hâlâ kayıyorsa rulo 200 mm (5 × 40 mm) olabilir. O zaman koddaki değerleri şöyle değiştirin:

PAGE_W_MM = 200
LABEL_W_MM zaten 200 / 5 = 40 olur

Satır yüksekliği 40 mm değilse yalnızca PAGE_H_MM değerini gerçek etiket yüksekliğine çekmeniz yeterli.

13-08-2026, 21:29:55

#6

Dodurgali

Emekleriniz için çok teşekkürler ama çözemedim halen. denemeye devam ediyorum.
13-08-2026, 22:36:32

#7

Sakox

Verilen kodlar çalışmıyorsa sorun büyük ihtimalle CSS'te değil, yazıcı-kağıt eşleşmesinde. İki senaryo var, hangisi olduğunu söylerseniz kesin çözerim:
1) Termal barkod yazıcısı (Zebra/TSC/Argox) + tek sıra rulo: tarayıcıdan @page ile verdiğiniz boyut çoğu termal sürücüde yok sayılır; yazıcı gap sensörüyle her etiketi ayrı algılar. Bu kağıtta "5 yan yana" fiziksel olarak mümkün olmayabilir — o rulo tek kolonludur. Çözüm 5 etiketi ardışık basmaktır, yan yana değil.
2) Lazer/mürekkepli + 5 kolonlu sticker sayfası: kod yaklaşımı doğru ama mm ölçüleri etiketinize birebir uymalı; 1 mm sapma bile kaymayı büyütür. Ayrıca yazdırma ekranında ölçek %100, kenar boşluğu "yok" olmalı.
Yazıcı marka/modeli ve etiket yapısını (tek sıra rulo mu, 5 kolonlu sayfa mı, etiket ölçüsü kaç mm) yazarsanız kodu kesin çalışır hale getiririm. Bu tip print/etiket işlerini yapıyorum.

13-08-2026, 23:15:35

Dodurgali

Sakox adlı üyeden alıntı: mesajı görüntüle

Verilen kodlar çalışmıyorsa sorun büyük ihtimalle CSS'te değil, yazıcı-kağıt eşleşmesinde. İki senaryo var, hangisi olduğunu söylerseniz kesin çözerim:
1) Termal barkod yazıcısı (Zebra/TSC/Argox) + tek sıra rulo: tarayıcıdan @page ile verdiğiniz boyut çoğu termal sürücüde yok sayılır; yazıcı gap sensörüyle her etiketi ayrı algılar. Bu kağıtta "5 yan yana" fiziksel olarak mümkün olmayabilir — o rulo tek kolonludur. Çözüm 5 etiketi ardışık basmaktır, yan yana değil.
2) Lazer/mürekkepli + 5 kolonlu sticker sayfası: kod yaklaşımı doğru ama mm ölçüleri etiketinize birebir uymalı; 1 mm sapma bile kaymayı büyütür. Ayrıca yazdırma ekranında ölçek %100, kenar boşluğu "yok" olmalı.
Yazıcı marka/modeli ve etiket yapısını (tek sıra rulo mu, 5 kolonlu sayfa mı, etiket ölçüsü kaç mm) yazarsanız kodu kesin çalışır hale getiririm. Bu tip print/etiket işlerini yapıyorum.

Şu lanet olası Argox A-200 cihazı. Aşağıya ekran görüntüleri bırakıyorum ve son kod yapısını. Bazen "kimi" bazen ise "antigravity" 'den yardım alıyorum.
Node.js ile yazdım yazılımı ve putty ile en son güncelleiyorum işlemlerden sonra dosyaları.

BarcodeDisplay.tsx adlı dosya

import React from 'react';
import { Printer } from 'lucide-react';
import { generateBarcodeSvg, formatBarcodeText } from '../utils/barcode';

interface BarcodeDisplayProps {
  barcode: string;
  productName?: string;
  priceTry?: number;
  unit?: string;
  size?: 'sm' | 'md' | 'lg';
}

const formatProductName = (name: string): string => {
  if (!name) return 'ÜRÜN';
  const upper = name.toUpperCase();
  return upper.length > 24 ? upper.substring(0, 24) : upper;
};

export default function BarcodeDisplay({
  barcode,
  productName = 'Ürün',
  size = 'md'
}: BarcodeDisplayProps) {
  if (!barcode) return <span className="text-slate-400 italic">Barkod Yok</span>;

  const svgMarkup = generateBarcodeSvg(barcode, size === 'sm' ? 28 : 35);
  const displayBarcode = formatBarcodeText(barcode);

  const handlePrintLabelDirect = (e: React.MouseEvent) => {
    e.stopPropagation();

    const labelTitle = formatProductName(productName);

    const printSvgMarkup = generateBarcodeSvg(barcode, 30).replace(
      '<svg',
      '<svg style="width:100%;height:100%;display:block;"'
    );

    const colsHtml = Array.from({ length: 5 }).map(() => `
      <div class="col-5up">
        <div class="sticker-inner">
          <div class="product-title">${labelTitle}</div>
          <div class="barcode-box">${printSvgMarkup}</div>
          <div class="code-num">${displayBarcode}</div>
        </div>
      </div>
    `).join('');

    const htmlContent = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barkod Etiketi - ${barcode}</title>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@page {
  size: 100mm 40mm;
  margin: 0mm !important;
}
@media print {
  @page {
    size: 100mm 40mm;
    margin: 0mm !important;
  }
  html, body {
    width: 100mm !important;
    height: 40mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .no-print { display: none !important; }
}
html, body {
  width: 100mm;
  height: 40mm;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}
.row-5up {
  width: 100mm;
  height: 40mm;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.col-5up {
  width: 20mm;
  height: 40mm;
  position: relative;
  overflow: hidden;
}
.sticker-inner {
  width: 38mm;
  height: 18mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
}
.product-title {
  font-size: 7pt;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 36mm;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
}
.barcode-box {
  width: 34mm;
  height: 8.5mm;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5mm 0;
}
.barcode-box svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.code-num {
  font-family: 'Courier New', monospace;
  font-size: 6.5pt;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #000;
}
.controls {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
}
.btn {
  padding: 8px 16px;
  margin-left: 5px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.print-btn { background: #0ea5e9; color: #fff; }
.close-btn { background: #0f172a; color: #fff; }
</style>
</head>
<body>
<div class="row-5up">
  ${colsHtml}
</div>
<div class="controls no-print">
  <button class="btn print-btn" onclick="window.print()">🖨️ Yazdır</button>
  <button class="btn close-btn" onclick="window.close()">✕ Kapat</button>
</div>
<script>
  window.onload = function() {
    setTimeout(function() {
      window.print();
    }, 250);
  };
</script>
</body>
</html>`;

    const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const printWin = window.open(url, '_blank', 'width=900,height=500');

    if (!printWin) {
      alert('Yazdırma penceresi engellendi. Lütfen pop-up engelleyicisini kaldırın.');
      URL.revokeObjectURL(url);
    }
  };

  const containerClasses = size === 'sm' 
    ? 'w-28 h-10' 
    : size === 'lg' 
      ? 'w-44 h-16' 
      : 'w-36 h-12';

  return (
    <div className="flex flex-col items-center gap-1 bg-slate-50 p-2 rounded-xl border border-slate-200/60 shadow-3xs group relative">
      <div 
        className={`${containerClasses} flex items-center justify-center`}
        dangerouslySetInnerHTML={{ __html: svgMarkup }} 
      />
      <span className="font-mono font-bold text-[10px] text-slate-800 tracking-wider">
        {displayBarcode}
      </span>

      {!(typeof window !== 'undefined' && window.innerWidth <= 1024) && (
        <button
          type="button"
          onClick={handlePrintLabelDirect}
          className="absolute inset-0 bg-slate-900/80 text-white rounded-xl opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 text-[10px] font-black cursor-pointer"
          title="Barkod Etiketi Yazdır"
        >
          <Printer className="w-3.5 h-3.5" />
          Etiket Bas
        </button>
      )}
    </div>
  );
}

14-08-2026, 14:55:52

#9

Pos3idon

aynı sorun ile günlerce uğraştım aklıma geldi yine sinirlendim lanet olası