Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy