html - 是否有打印 html 表格背景的技巧?

标签 html printing background html-table

假设,我将日历创建为 HTML 表格,其中不同的单元格具有不同的背景颜色和不同的文本。在屏幕上看起来不错。

我意识到无法在保留单元格背景色的情况下打印此表格。 指示我的观众调整他们的浏览器以打印日历是荒谬的。

有没有什么技巧可以像您在屏幕上看到的那样打印 HTML 表格? 也许有可能以某种方式将其转换为图像或其他东西?


这是我想出的解决方案。
下面是创建可打印 3x2 板的图示,其中包含 100pt x 100pt 单元格。我尽可能地简化了片段。主要思想:每个单元格都有一个被文本覆盖的图像。这比使用简单的背景颜色要慢得多,但允许使用单一代码库进行屏幕和打印。
您可以通过额外的样式摆脱内部间距。

<table style="table-layout:fixed; width:300pt; height:200pt; border-collapse:collapse; line-height: 0;">
    <tr>
        <td>
        <img src="Content/images/backTab.png" style="width:100pt; height:100pt; position:relative; z-index:0" />
        <div style="position:relative; top:-50pt; z-index:1; color:Red; text-align:center; ">Text</div>
        </td>

我是 Web 开发的新手,我发现整个情况很荒谬。成千上万的开发人员为打印背景颜色/图像而哭泣,但没人在意。我看过 W3C HTML/CSS/Printing 标准。没有关于抑制打印背景的内容。如果浏览器决定保存用户的墨迹,则必须有 CSS 样式来明确强制执行后台打印。在这种情况下,显示和打印棋盘、填字游戏或日历不会有愚蠢的困难。

如果有人在 W3C 中有联系,请告诉他们。

最佳答案

您可以创建一个 css 文件并在 html 中指定它应该用于打印:

http://www.alistapart.com/articles/goingtoprint/

但是,如您在屏幕上看到的那样打印等设置需要在网络浏览器的打印设置中更改设置。

不幸的是,如果没有自定义解决方案,就无法解决这个问题。

您可以使用 Prototype Javascript 并将 HTML 分配给 Canvas 元素,这将在客户端创建图像。

http://prototype-graphic.xilinus.com/

希望对您有所帮助,

杰弗里·凯文·普赖

关于html - 是否有打印 html 表格背景的技巧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6479557/

相关文章:

html - R 为相同的 Google 搜索 URL 显示不同的 HTML(与网络浏览器相比)

html - 在 : avoid works only in IE? 之后分页

android - 在图像后面设置背景

html - 从 CSS 文件更改 Logo 图像?

Chrome 中的 HTML5 视频标签 - 为什么从我的网络服务器下载视频时忽略 currentTime?

javascript - 将 html 内容调用到 jQuery 变量中

java - 在java中的同一行中打印

Java 不打印整数变量

android - onDestroy 被调用

html - Flexbox - 填充剩余空间