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

Print the Barcode

Environment

Product Progress® Kendo UI® Barcode for jQuery

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/themes/7.2.1/default/default-main.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