QRCode with Footer Text

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..


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>