Question

我有一个打印表格代码LINK

检查我的代码：

function printData()
{
   var divToPrint=document.getElementById("printTable");
   console.log(divToPrint.outerHTML);
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

我已将background-color添加为红色，就像你在小提琴中看到的一样。我试着打印它。但是在印刷品中，颜色不会出现，所有其他东西都可以正常工作我已经研究了@media print以及所有但都无法解决它的问题。请指导我，你可以给我一个更新的小提琴。干杯！

Answer 1

大多数浏览器都不会打印背景颜色或图像。有些设备具有用户控制的设置，但您无法依靠背景，这取决于用户（如果浏览器甚至允许他们这样做）。

另外：您的新窗口在示例中没有任何显式样式，除非它位于printTable元素内，¹因为您正在创建一个完全独立的完全独立的窗口 ，因此不会继承当前页面的样式。

¹在技术上无效，style和link不允许在head之外，但我从来不知道它实际上是一个问题

Answer 2

默认情况下，浏览器会禁用背景颜色和图像。检查浏览器的打印选项以获取“打印背景颜色”选项或类似选项，例如在Chrome中：

在“打印”对话框中，点击左侧栏底部附近的“+更多设置”
勾选“背景图片”框
打印预览现在应该显示背景颜色

Firefox似乎在打印对话框的“选项”标签下的“打印背景”下有两个选项：

“打印背景颜色”;和
“打印背景图片”

请注意，我正在使用Ubuntu;这些选项的具体措辞和位置可能因您的操作系统和浏览器而异。有些浏览器可能根本没有它的选项，只需剥离所有背景颜色/图像进行打印。

我认为你没有办法从JS / CSS / HTML代码中强制使用这些选项;它始终取决于用户以及其他打印选项。

Javascript传统的print（）方法样式不会出现在打印视图中

2 个答案: