Question

的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"/>

单击该按钮后，JavaScript应打印该表但在进度中丢失background-color。

我试图修改CSS样式，但它只是删除了表格的所有样式并打印它甚至有点过于简单。

Answer 1

这是一种非常奇怪的打印方式，但如果您看到的唯一问题是它不打印背景颜色，那么您可能会失去运气。在大多数浏览器（全部？）中，表格的背景颜色的打印由打印对话框控制，而不是由网页本身控制。这是为了节省墨水，所以默认情况下它是关闭的。您需要做的是在出现的打印对话框中单击print backgrounds复选框（措辞因浏览器/操作系统而异）。

据我所知，这无法以编程方式可靠地控制。遗憾。

我听说你可以使用下面的CSS，但它实际上只在Safari中正确支持并且Chrome中有错误。

body {
    -webkit-print-color-adjust:exact;
}

使用JavaScript打印div的内容，不使用背景色样式

1 个答案: