Print the Barcode
Environment
| Product | Progress Kendo UI Barcode |
| Operating System | Windows 10 64bit |
| Browser | Edge |
| Browser Version | Microsoft Edge 40.15063.0.0 |
| Made with version | 2017.3.1018 |
Description
How can I print the Kendo UI Barcode?
Solution
You can print the Barcode on another page by opening a new window and placing the Barcode DOM elements on the page.
<button class="k-button">Print</button>
<div id="toPrint">
<span id="manchego"></span>
</div>
<script>
$(document).ready(function () {
$("#manchego").kendoBarcode({
value: "2346722",
type: "ean8"
});
$('button').click(function(){
var divToPrint=document.getElementById('toPrint');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><head> <link href="https://kendo.cdn.telerik.com/' + kendo.version + '/styles/kendo.common.min.css" rel="stylesheet" /></head> <body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
})
});
</script>
<style scoped>
#manchego svg{
width: 102mm !important;
height: 192mm !important;;
}
@media print{
#manchego svg{
width: 102mm !important;;
height: 192mm !important;;
}
}
</style>