New to Kendo UI for jQuery? Download free 30-day trial

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

Open a new window and place 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('<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>');
          newWin.document.close();
        })
      });
    </script>
    <style>
      #manchego svg{
        width: 102mm !important;
        height: 192mm !important;;
      }
      @media print{
        #manchego svg{
          width: 102mm !important;;
          height: 192mm !important;;
        }  
      }           
    </style>
In this article
Not finding the help you need? Improve this article