0

Currently my web page is full of various text colors but when I try to print the page then all text colors are displaying in black color only. So how can I make so page text displays in original colors (not black fonts & white background) when print / print preview it?

Another thing is that, using below code I am able to hide header, footer from web page during printing but how can I print only specific area of web page instead of entire web page? My page is designed using HTML, CSS, DIV and Bootstrap. So is it possible to do it using PHP or Javascript or CSS? Please help.

CSS Code

<style type="text/css" media="print">
@media print 
{
    header, .footer, footer { display: none; }
    color-adjust: [economy | exact]; // I tried this for color profile but not working
}
@page 
{
    size:  auto;
    margin: 0mm;
}
html
{
    background-color: #FFFFFF; 
    margin: 0px;
}
body
{
    border: solid 1px black ;
    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
</style>

HTML & Javascript code

<button onclick="window.print()" class="btn btn-lg btn-info">&nbsp;&nbsp;<i class="fas fa-print"></i>&nbsp;&nbsp;Print&nbsp;&nbsp;</button>

I tried this code in CSS for color option but not working. color-adjust: [economy | exact];

EDIT#1

I have done following in my CSS and HTML to skip printing of specific data on web page. But not working.

<style type="text/css" media="print">
@media print 
{ .noprint{display:none}; }
</style>

<div class="row padding-10 noprint">
    <div class="col-md-12" align="center">
        This text should not be printed on printer
    </div>
</div>
RK Ahir
  • 105
  • 9
  • In order to print only a part, what I do is I add a class called `noprint` to everything that I don't want printed (or its parent if all children will be not printed). Then in the print media query, add `.noprint{display:none}` instead of the header,footer etc.. – imvain2 Oct 02 '20 at 16:40
  • the choice to print black or colors is set from the printer by the user. There is nothing you can do about, but eventually a disclaimer and a recommandation to reset the printer setting if they want colors (bg is the same, the user decides). – G-Cyrillus Oct 02 '20 at 16:44
  • You should check your printer. I have a colour printer, but I often print things in "greyscale "- so any preview starts as that and I have to change it to "colour" – ATD Oct 02 '20 at 16:45
  • @ATD, I checked that settings and it's not `greyscale`... I even tried to print this page and fonts are displaying in original colors during print preview / print. – RK Ahir Oct 02 '20 at 16:53
  • @imvain2, I have updated my question and added code as per your suggestions but not working. Please have a look at my updated info and advise. – RK Ahir Oct 02 '20 at 16:58
  • You can always try the hated `!important`: `.noprint{display:none !important};` – imvain2 Oct 02 '20 at 17:21
  • @imvain2, I already tried but no luck yet – RK Ahir Oct 02 '20 at 17:24
  • the semi-colon was in the wrong place - try this { .noprint{display:none;} } – John Oct 02 '20 at 17:29
  • @John, still not working – RK Ahir Oct 02 '20 at 17:48
  • Finally, this answer helped me to print specific part of web page. https://stackoverflow.com/a/48215828/7688114 – RK Ahir Oct 03 '20 at 03:44

0 Answers0