Programmer: html

Friday, February 17, 2017

Create a barcode Using Javascript Jquery

Hello, if you want to create a barcode using javascript you can do it as follows.

You can download the js file from this link, latter you can create a function for use the barcode.

In html we create the next div and the next button

 <div id="barcode"></div>  
 <button type="button" id="brnBarCode" onclick="load();">Barcode</button>

Remember include the script downloaded jquery-barcode.min.js and the jquery script in the html file, for example:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  
 <script src="<%=request.getContextPath()%>/static/js/jquery-barcode.min.js"></script>

In this example we create a function called load, this function invoke the barcode method

 load = function(){  
  $("#barcode").barcode(  
  $('#docId').val(), // Value barcode (dependent on the type of barcode)   
  "code39" // types supported   
  );  
 }

The button calls the function load, this function will create the barcode that it will be displayed in the div with id = barcode.

 Barcode types supported:  
 EAN 8  
 EAN 13  
 UPC  
 standard 2 of 5 (industrial)  
 interleaved 2 of 5  
 code 11  
 code 39  
 code 93  
 code 128  
 codabar  
 MSI  
 Data Matrix

Reference: link

javascript print all page or print a page section

Hello everybody.

If we print all page using javascript we can use the next code:

 window.print();

For example, we create the next Html code with a respective javascript.

 <!DOCTYPE html>  
 <html>  
 <body>  
 <p>print this</p>  
 <button onclick="printAll()">Print Page</button>  
 <script>  
 printAll = function(){  
   window.print();  
 }  
 </script>  
 </body>  
 </html>

When we click on the button, the page can be print.

Now we want print a page section with javascript, we can use the next code:

 print = function(area){  
  var ficha=document.getElementById(area);  
  var ventimp=window.open(' ','popimpr');  
  ventimp.document.write(ficha.innerHTML);  
  ventimp.document.close();  
  ventimp.print();  
  ventimp.close();  
 }

Here there is an example:

 <!DOCTYPE html>  
 <html>  
 <body>  
 <div id="area"><p>print this</p></div>  
 <p>No print this</p>  
 <button onclick="print('area')">Print Page</button>  
 <script>  
 print = function(area){  
  var ficha=document.getElementById(area);  
  var ventimp=window.open(' ','popimpr');  
  ventimp.document.write(ficha.innerHTML);  
  ventimp.document.close();  
  ventimp.print();  
  ventimp.close();  
 }  
 </script>  
 </body>  
 </html>

When we click on button, we can print only the content of the div with id = area