Recently, I was working with a library which helps to generate barcode within images,

the open source library is called ZXing (http://zxingnet.codeplex.com/).

Its a free library with lots of great features and even supports QRCode generation.

The only missing feature I came across was of writing a Barcode Text below the generated image,

like the sample image below.

I reached out ZXing support team, here they replied to my thread..

http://zxingnet.codeplex.com/discussions/452290

Implementing such functionality in an html page was not that a big task..

Anyway here I came up with a solution. Hope this helps you..


  1. <div style="border: 1px double black;width:50%;text-align:center;" id="PrintBarcode">
  2. <div><asp:Image ID="imgBarcode" runat="server" /></div>
  3. <div style="margin-top:-10px;"><asp:Label ID="lblTexttoDisplay" runat="server"></asp:Label></div>
  4. </div><br />
  5. <a ID="PrintMe" runat="server" Text="Print" onclick=""></a>
  6. <script type="text/javascript">
  7. function PrintMe()
  8. {
  9. var popupWin = window.open('', '_blank', 'width=0,height=0,directories=0,fullscreen=0,location=0,menubar=0,
  11. resizable=0,scrollbars=0,status=0,titlebar=0,toolbar=0');
  12. popupWin.document.open();
  13. var divToPrint = document.getElementById('PrintBarcode');
  14. popupWin.document.write('<html><body onload="window.print();this.close();">
  16. <div style="border: 0px double black;width:50%;text-align:center;">' + divToPrint.innerHTML + '</div></html>');
  17. }
  18. </script>