for print datatable i have js code is :

<script type="text/javascript">
  function data(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}
</script>

But in case it generate the print option and save the file but because of scrool in datatbale its not printing plete data

My anchor is given below:

for print datatable i have js code is :

<script type="text/javascript">
  function data(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}
</script>

But in case it generate the print option and save the file but because of scrool in datatbale its not printing plete data

My anchor is given below:

• javascript
• jquery
• css
• datatable
• bootstrap-4

2 Answers 2

The best way is to make use of CSS3 media query for it.

@media print{
   body{
       font-size:12px;
       font-family:"Times New Roman";
   }
}

for more details about media query check out MDN link.

media query helps browser to select proper style depending on the situation. The style gets overridden as below.

1. in-line style
2. selector (in media query)
3. selector (not in media query)

If you are trying to override some selector, add the same in media query, with changed properties. Browsers then will select the styles defined in appropriate query.

If you have the style in-line, then one way to solve is using !important tag. It is generally not preferred to use the important tag.

For the print design include separate css

<link rel="stylesheet" type="text/css" href="https://www.example./css/print.css" media="print" />

for edit print layout using inspect element Open inspect element >>> More Tool >>> click on Rendering

you will see Emulate CSS media drop down select print

Now edit css and check the result.

Note: I have tested it in chrome

Thanks