-1

JavaScript

<script>
function printDiv(divID) {
  var divElements = document.getElementById(divID).innerHTML;

    var oldPage = document.body.innerHTML;

    document.body.innerHTML = 
      "<html><head><title></title></head><body>" + 
      divElements + "</body>";

    window.print();

    document.body.innerHTML = oldPage;

}
</script>

HTML

<div id="printablediv"> 
<table class="table table-hover table-striped" id="bootstrap-table">
         <tr bgcolor="#E4E4E4">
                <th>#ID</th>
                <th>Username</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr>
                <td>200</td>
                <td>janedoe</td>
                <td>Yane</td>
                <td>Doe</td>
            </tr>
            <tr>
</table>
</div>
<input type="button" value="Print" onclick="javascript:printDiv('printablediv')" style="float:right"/>

After the button is clicked the JavaScript should print the table but lose the background-color in the progress.

I have tried to modify the CSS-style but it just erases all the styles of the table and prints it even a bit too simple.

Pepelius
  • 1,576
  • 20
  • 34
Shoaib Mansuri
  • 23
  • 5

1 Answers1

1

That's a really strange way of printing, but if the only issue you see is that it's not printing the background color, you might be out of luck. In most browsers (all?) printing of background colors of tables is controlled by the print dialog, not the by webpage itself. This is to save ink, so by default, it's turned off. What you need to do is click the print backgrounds checkbox (wording will vary with browser/operating system) in the print dialog box that comes up.

As far as I'm aware, this cannot be reliably controlled programatically. Sorry.

I've heard that you can use the following CSS, but it's really only properly supported in Safari and buggy in Chrome.

body {
    -webkit-print-color-adjust:exact;
}
Kevin Nagurski
  • 1,889
  • 11
  • 24