Remove body background color while printing div content using JavaScript and jQuery in ASP.Net

anjali600
 
on Sep 16, 2021 10:42 PM
Sample_181023.zip
437 Views

I am using below code to print the contents between two div tags, The code works fine except the background color of the web page also shows up in the printout.

Is it possible that I can force the print to be only done in black and white or somehow  remove the blue color in the javascript code: below is the code that works fine:

function printContent(el) {
    var restorepage = $('body').html();
    document.getElementById('<%=lblDateTime.ClientID %>').style.display = "block";
    document.getElementById('<%=lblDateTime.ClientID %>').innerHTML = new Date().toLocaleString();
    document.getElementById('<%=acrLogo.ClientID %>').style.display = "block";
    document.getElementById('<%=compName.ClientID %>').style.display = "block";
    var printcontent = $('#' + el).clone();
    printcontent.removeAttr('style');
    $('body').empty().html(printcontent);
    window.print();
    $('body').html(restorepage);
}

I just don't want the printout background color in blue.

Is their any way, I can disable the background color from blue to white.

any help will be highly apprecaited.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 17, 2021 04:18 AM

Hi anjali600,

You need to set body background-color to while.

Refer below code.

HTML

<input type="button" value="Print" onclick="printContent('pnlData')" />
<div id="pnlData">
    <asp:Label ID="lblDateTime" Text="DateTime" runat="server" />
    <asp:Label ID="acrLogo" Text="Logo" runat="server" />
    <asp:Label ID="compName" Text="Name" runat="server" />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function printContent(el) {
        var restorepage = $('body').html();
        document.getElementById('<%=lblDateTime.ClientID %>').style.display = "block";
        document.getElementById('<%=lblDateTime.ClientID %>').innerHTML = new Date().toLocaleString();
        document.getElementById('<%=acrLogo.ClientID %>').style.display = "block";
        document.getElementById('<%=compName.ClientID %>').style.display = "block";
        var printcontent = $('#' + el).clone();
        printcontent.removeAttr('style');
        $('body').empty().attr('style', 'background-color: while;').html(printcontent);
        window.print();
        $('body').html(restorepage);
    }
</script>