blog

How to Print Page Area using Java Script Print

if you need a print specific part of a web page in using javascript, this is a good idea so lest go this code sections,
The application has a list of users, displaying their first and last names. When I click a user I get a popup with more detailed information about them. java script print

print specific part of the webpage

How to Print Page Area using JavaScript

how to print a specific part of a web page using javascript

Also, how to print a specific part of the web page in html

print-specific-area-of-web-page-using-jquery

the print specific part of webpage javascript

You can use simple print a specific div from a page. java script print

HTML Code:

<div class="ibox" id ="PrintDiv1">
  <div class="ibox-content">
   This content sections 
  </div>
</div>

HTML Code:

we are using print button which will trigger printDiv() function on clicking on it.

<button id="PrintBTN" href="javascript:void(0);" onClick="printDiv()" title="Print" type="button" class="btn btn-success btn-list"><i class="fa fa-print fa-lg"></i>&nbsp;Print</button>

 

printDiv() function opens a new window with web page content and printing option based on the provided element ID. You can use this function for print a specific area of web page or full web page content.

<script>
  function printDiv() 
    {
      var divToPrint=document.getElementById('PrintDiv1');
      var newWin=window.open('','Print-Window');
      newWin.document.open();	 
      newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
      newWin.document.write('<link rel="stylesheet" type="text/css" href="css/bill_print.css" >');
      newWin.document.close();
      setTimeout(function(){newWin.close();},100); 
    }
</script>

Finding background color of page or page view using Javascript

You can use the pure javascript or jquery to achieve what you want. To do what you want you can use this functions

Find by tagname:

function getBackgroundByTagName(tag){
    var color =  $(tag).css('background-color');
    console.log(color);
}
function getBackgroundByClassName(classname){
    var color =  $('.'+classname).css('background-color');
    console.log(color);
}

media print background color not working

CSS @media print issues with background-color;

 

this is the best code for the print background color or background image on this code just using connection the print CSS line

@page {
  /* size: A4; */
  size: A4 Portrait;
  margin: 2mm;
  /* margin: 1; */
   -webkit-print-color-adjust: exact;
   color-adjust: exact; /*firefox & IE */
   
}
@media print {
  html, body {
  width: 100%;
    /* width: 210mm; */
    height: 100mm;
  margin: 0mm 0mm 0mm 2mm;
  -webkit-print-color-adjust: exact;
  color-adjust: exact; /*firefox & IE */
  }
  
  @page {
  /* size: A4; */
  size: A4 Portrait;
  margin: 2mm;
  /* margin: 1; */
   -webkit-print-color-adjust: exact;
   color-adjust: exact; /*firefox & IE */
   
}