Штрих-код не печатается правильно с использованием библиотеки JSBarcode - PullRequest
Новая
       24

Штрих-код не печатается правильно с использованием библиотеки JSBarcode

0 голосов
/ 26 октября 2018

Я пытаюсь распечатать сгенерированный штрих-код.Я использую библиотеку JSBarcode для генерации штрих-кода.

На экране печати хорошая визуальность, но когда я ее печатаю, получается 4 страницы, и только одна страница имеет штрих-код, а штрих-код очень маленькийи внизу страницы.

Мой HTML-код: 

<div class="col-12 col-print-12">
   <p class="barcode tekli">
      <svg id="barcode tekli"></svg>
   </p>
</div>

Мой JS-код: 

JsBarcode("#barcode", "1554466", {
    width:5,
    height:200,
    fontSize:50,
    displayValue: true
});

window.print();

window.open('', '_parent', '');

window.close();

Мой CSS-код: 

@media print {
    .tekli{
        -webkit-transform: scaleX(2);
        -o-transform: scaleX(2);
        -ms-transform: scaleX(2);
        transform: scaleX(2);
    }
    .page {
        width: 21cm;
        height: 29.7cm;
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
    .col-print-12 {
        width: 100%;
    }
}

Можете ли вы помочь мне, пожалуйста?

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Ваш код с небольшими изменениями в html / CSS работает нормально для меня.

Я удалил id tekli из svg (у вас не может быть несколько идентификаторов), а также удалил стиль .tekli из CSS. 

JsBarcode("#barcode", "1554466",{
    width:5,
    height:200,
    fontSize:50,
    displayValue: true

});

window.print();

window.open('', '_parent', '');

window.close();
	  @media print {
       
        .page {
            width: 21cm;
            height: 29.7cm;
            margin: 0;
            border: initial;
            border-radius: initial;
            width: initial;
            min-height: initial;
            box-shadow: initial;
            background: initial;
            page-break-after: always;
              }
             .col-print-12 {
            width: 100%;
             }
              }
<script src="https://cdn.jsdelivr.net/jsbarcode/3.3.7/JsBarcode.all.min.js"></script>
<div class="col-12 col-print-12">

            <p class="barcode tekli">
                <svg id="barcode"></svg>
            </p>

        </div>

Вы также можете проверить это здесь

0 голосов
/ 26 октября 2018

Попробуйте это 

$(document).ready(function(){
    JsBarcode("#barcode", "1554466",{
        width:5,
        height:200,
        fontSize:50,
        displayValue: true

    });

    window.print();

    window.open('', '_parent', '');

    window.close();
});

или удалите тег svg и замените его простым div с id = "barcode" 

let divDOM = document.getElementById("barcode");
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('jsbarcode-format', 'ean13')
svg.setAttribute('jsbarcode-value', '<?php echo $product["ean"]; ?>')
svg.className.baseVal = "barcode";
divDOM.appendChild(svg);
JsBarcode("#barcode","Smallest width",{
    width: 1,
    height: 25,
    lineColor: "#676a6c"
}).init();
...