How Can i set the fontsize time of print

Question

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 complete data

My anchor is given below:

Prajwal · Answer 1 · 2018-01-29T06:39:17.473

4

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.

in-line style
selector (in media query)
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.

edited Jan 29 '18 at 06:39

answered Jan 29 '18 at 06:15

Prajwal

3,930
5
24
50

i did the same but its not working in my case... dont know y – Apoorva Jan 29 '18 at 06:18
@Apoorva I think Prajwal provided a good answer to your question. What do you mean when you say it's not working. What happens. Be more descriptive please. – Adelin Jan 29 '18 at 06:22
Use bootstrap datatable, you could initialize Button and append it to another div, clean the classes by default and put your own styles – Diana Ysabel Jan 29 '18 at 06:26
@Apoorva `document.body.style.fontSize = "x-small"`? – Adelin Jan 29 '18 at 06:27
@Apoorva I answered – Adelin Jan 29 '18 at 06:30
@Apoorva most probably you've hard coded the font-size in css class. Use the same class in the media query to override the style. – Prajwal Jan 29 '18 at 06:32

score 1 · Answer 2 · answered Jan 29 '18 at 06:41

For the print design include separate css

<link rel="stylesheet" type="text/css" href="https://www.example.com/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

How Can i set the fontsize time of print

2 Answers2