I am trying to print a generated barcode. I am using the JSBarcode library to generate the barcode.
On the print screen, visuality is good but when I print it, the result is 4 pages and just one page has the barcode, and the barcode is very little and at the bottom of the page.
My html code is:
<div class="col-12 col-print-12">
<p class="barcode tekli">
<svg id="barcode tekli"></svg>
</p>
</div>
My JS code is:
JsBarcode("#barcode", "1554466", {
width:5,
height:200,
fontSize:50,
displayValue: true
});
window.print();
window.open('', '_parent', '');
window.close();
My CSS is:
@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%;
}
}
Can you help me please?
Try this
$(document).ready(function(){
JsBarcode("#barcode", "1554466",{
width:5,
height:200,
fontSize:50,
displayValue: true
});
window.print();
window.open('', '_parent', '');
window.close();
});
or to delete svg tag and replace with a simple div with 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();
Your code with minor changes in html/CSS working fine for me.
I have removed id tekli
from svg (you can't have multiple Ids) and also removed .tekli
style from 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>
You can also test it here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.