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="http://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>
In this article
Not finding the help you need? Improve this article