locked
Print Media Query not working in Razor View RRS feed

  • Question

  • User1315226703 posted

    Hy All

     I am using MVC5 Razor View with Jquery to print Partial View Div.

    in Partial View,there are many div with background color.e.g

    <div  id="divReports"> 
        This is Test.
    </div>

    my Jquery method to print is :

    function printElementGeneric(divId, title) {
    
        var content = document.getElementById(divId).innerHTML;
        var mywindow = window.open('', 'Print', 'height=600,width=800');        
        mywindow.document.write('<html><head><title>' + title + '</title>');    
        mywindow.document.write('</head><body >');
        mywindow.document.write(content);
        mywindow.document.write('</body></html>');
        mywindow.document.close();
        mywindow.focus()
        mywindow.print();
        mywindow.close();
        return true;
    }



    <style type="text/css" media="print">
    @@media print {
    #divReports {
    background-color: yellow;
    }
    }
    </style>

    But background color is not reflecting in Print.
    Can any one help me.

    Thursday, November 8, 2018 7:14 AM

All replies

  • User-821857111 posted

    But background color is not reflecting in Print.
    Probably nothing to do with your CSS or ASP.NET. More likely a printer setting. See this answer on Stack Overflow: https://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color

    Thursday, November 8, 2018 10:25 AM
  • User1520731567 posted

    Hi mohsin.afridi91,

    You could add css: -webkit-print-color-adjust: exact !important; in body tag.

    But you should pay attention to your JS code, you open a new window and add <body> tags again.

    This will affect the print color.

    You could refer to my demo,it works fine:

    <style type="text/css" media="print">
        @media print {
            #divReports {
                background-color: yellow !important;
            }
        }
        body {
            -webkit-print-color-adjust: exact !important;
        }
    
    </style>
    
    <input type="button" value="PrintDiv" onclick="printElementGeneric()" />
    <body>
        <div id="divReports">
            This is Test.
        </div>
    </body>
    <script type="text/javascript">
        function printElementGeneric() {
    
            var content = document.getElementById("divReports").innerHTML;
            window.print(content);
            return true;
        }
    </script>

    Best Regards.

    Yuki Tao

    Friday, November 9, 2018 9:28 AM
  • User1315226703 posted

    Thanks Mike

     But i did not understand why print media query is not working in Razor -Asp.net MVC?

    Thursday, November 15, 2018 10:46 AM
  • User-821857111 posted

    Did you check the printer settings? They will override any settings declared in a style sheet.

    Thursday, November 15, 2018 11:29 AM
  • User-474980206 posted

    you have two issues

    1) the style is in the main document, not the new document. add before the </head>

    mywindow.document.write('<style type="text/css" media="print">@@media print {#divReports {background-color: yellow;}}</style>');

    2) many browsers will not print a background color unless the user sets a setting allowing it. 

    Thursday, November 15, 2018 3:11 PM