我正在我的应用程序中生成一个 HTML 报告，我想绘制一些颜色预览框。如果我为 div、字符或表格单元格元素使用背景颜色样式，那么当用户从他们的浏览器打印页面时，默认情况下它不会打印出来(例如，打印为 PDF 将丢失颜色框)。
在 Chrome 和早期版本的 IE 中，您可以手动打开“打印背景颜色和图像”选项，但默认情况下它始终处于关闭状态。在 Windows 10 - Edge 浏览器中，我似乎根本找不到这个选项，所以它肯定会让我的用户感到头疼。因此，我真的很想默认打印颜色，而不必深入研究可能不存在的选项。
实验表明，HTML5 canvas 元素在使用 fillRect() 时默认打印，但它需要内联 javascript 来绘制每个框。这大大增加了文件大小，因为我的报告在一张大表格的每一行都有一个颜色框。似乎没有一种标准方法可以在 CSS 中包含 javascript，这样我就可以在每一行中定义填充矩形的颜色。
有没有更有效的方法来绘制默认情况下在浏览器中打印的 HTML 框？或者我是否必须为每一行的每个矩形内联相同的 javascript 绘图代码？
最佳答案
没有更好的答案，我认为似乎适用于大多数现代浏览器的最有效方法是 SVG。这段代码似乎适用于 IE9+ 和我测试过的所有其他浏览器，无论背景设置如何，它似乎都能正确打印，并且是相对紧凑的代码，不需要额外的内联 javascripting。
此代码绘制了一个带有黑色细边框的紫色矩形。唯一需要注意的是它似乎缺少 Edge 中最左边的框外边缘(具有讽刺意味)，但在 IE11 和 Chrome 中呈现良好，并且应该可以在 FF、Safari、Android 和 Opera 中工作。
<svg width="16" height="16"> Browser does not support SVG <rect width="15" height="15" style="fill:rgb(150,150,255);stroke-width:1;stroke:rgb(0,0,0)"></svg>关于javascript - 如何在所有浏览器中正确打印的 HTML 中绘制多个彩色矩形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32447896/