问题标签 [print-css]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
90 浏览

html - 如何在页面底部打印一次 HTML div 块,如果它与先前的元素重叠,则让它跳转到下一页?

如何打印一个div元素,使其位于页面底部,但不是页脚,并且无论要打印多少页都只打印一次(当我将其设置为页脚时它显然开始在每一页上打印自己)

另外,如果页面上没有足够的空间来打印它,它就是跳转到第二页。

这是什么

我有一个 div 块,它是表格的图例。它更详细地描述了表的字段。

在此处输入图像描述

到目前为止我尝试过的事情

我尝试了固定页脚方法:

不知何故,它开始在所有页面上打印我的图例,而不仅仅是我需要它的第一页。此外,当我的桌子太长时,它会与图例重叠。这是不可取的。我不确定如何进行。

0 投票
0 回答
246 浏览

css - 如何使用 print-CSS 拆分长 HTML 表格,以便第一页表格中的拆分为页面底部的 div 留出空间?

我有一个显示在浏览器窗口中的多页文档。文件是一张长桌和一个图例。

我希望表格在页面底部之前停止打印大约 300 像素,然后打印图例,然后继续在第二页上打印表格。

在此处输入图像描述

红线表示我希望桌子打破的地方。

如何 ?

到目前为止我所拥有的:

目前,我能够使用下面的 CSS 打印第一页底部的图例:

但是我的表格正打印在图例 div 上,将自身叠加在图例上。

我需要的是表格 div 在图例 div 之前停止打印,然后打印图例 div,然后在下一页继续表格。

黑客 #1

我可以通过使用在某一行强制分页符

这有点工作,但不是很好,因为它是硬编码的。表格数据变化,表格边框上下移动。

理想情况下,我想找到一种更好的方法来处理这些问题。

0 投票
3 回答
913 浏览

html - 谷歌浏览器在不同的计算机上处​​理分页符的方式不同

我正在为 Web 应用程序中呈现的报告最终确定打印样式表,并且已收到有关不同机器上的一些打印问题的通知。在我的页眉之前添加分页符时,我注意到大量添加的空白,这似乎与分页符有关。当我background-color: green在页面的页眉或页脚中添加 , 等时,空白显然不是由于任何一个。我的 Windows 10 操作系统机器和我作为备份的 Mac 操作系统都创建了一个打印预览文档,该文档按照我的预期尊重分页符,但另一台运行 Windows 10 的机器显示了添加的空白。

更新- 遇到分页符问题的其中一台机器仅在特定 WiFi 连接上遇到问题。当连接到我工作位置的WiFi时,问题似乎从他的机器上消失了,但是当连接到他工作位置的WiFi时,问题又出现了。很诡异....

我正在申请page-break-before: always我的标题内容,我的网站代码如下:

最后,这是我所指的添加的空白区域的屏幕截图:

在此处输入图像描述

很高兴在必要时提供更多的清晰度,我只是用这个把头撞到墙上。

0 投票
1 回答
187 浏览

javascript - print-css 只打印正文内容

我一直是 css 的抵制采用者之一,但我认识到它们的有用性,现在甚至是必要性。我遇到的问题是我的 print.css 做错了什么,导致它无法正常工作。(也就是说,与没有它的打印没有什么不同)

目标:我正在开发一个实用程序,用于将带有二维码的标签发送到标签打印机。我正在用 Python 编写此代码,并找到迄今为止以我想要的格式呈现标签的最佳方法,即使用一些 html。

标签格式

我拥有的 html 将标签按照我想要的方式呈现到屏幕上。然后我想将它发送到打印机。但是,我只想打印标签以及必要的换行符,以充分推进标签卷以准备打印下一个标签。

我的想法是将我的页面尺寸定义为标签纸的周边,打印每个标签,然后换页。

我认为,如果不是全部的话,我可以通过一些 JavaScript 将页面发送到打印机并使用 print.css 文件来格式化发送到打印机的页面。

我还没有尝试控制页面大小或强制新页面。我想先将数据打印在标签上,然后再调整其余部分。

下面是我的 html 和我的 print.css 文件。

我也在引用 main.css 的 html 中,它是空白的,因为所有必要的格式都发生在 html 中,但我遇到的一些事情似乎表明 main.css 对于 print.css 是必需的。这对我来说没有意义,但试图覆盖基础,因为我远非 css 专家。

我只希望 print.css 删除不必要的页眉和页脚信息并仅打印标签中的内容。

JavaScript 正在工作,但我无法让 css 影响打印机的输出。我继续在右侧获取左侧网页名称的标题和左侧的文件位置和左侧的页码/序列的页脚。

html.page

打印.css

编辑:更正了 html 标签 - KC

0 投票
1 回答
15 浏览

css - print.css 在不同的浏览器上看起来不同

我有一个用户可以打印的页面。但是打印不应该只打印某些元素。

所以我有一个 print.css 文件来处理这个问题:

我在我的 Ubuntu 机器上使用 Chrome 版本 79.0.3945.88 进行开发。所以当我点击Ctrl + P一切看起来都很好。

但是一旦我使用 Chrome 版本 80.0.3987.163 部署并从我的 Windows 机器上检查,格式都是错误的。字体太大,导致打印页面上只显示一半。

我尝试使用诸如22px字体大小之类的设置值来代替,2.5em但这并没有改变任何东西。事实上,我必须进入高级设置并将比例从“默认”设置为“自定义 60%”,然后使打印页面看起来像我在开发机器上的打印页面。

为什么有区别?我想既然我使用 % 和 em 它应该在每个地方看起来都一样?

0 投票
1 回答
34 浏览

css - 类和 id 选择器在 AntennaHouse Formatter 中不起作用

我是 Print CSS 的新手,正在使用 AH Formatter Lite V6.6 开发 XML 文档的模板。我无法让类选择器工作。

例如,源代码段:

和模板片段:

...没有任何影响。

这同样适用于 id 选择器。我验证了模板(通过),尝试了各种等效的选择器(para.Body_Text,section para.Body_Text,section > para.Body_Text),但无济于事。

尽管我可以选择元素,但我无法在文档中的任何位置选择任何类或 id。

是什么赋予了?

0 投票
1 回答
75 浏览

html - 为什么媒体打印中横向页面的内容隐藏

我正在尝试以纵向和横向打印页面。

我已经设法使用以下 css 片段获得横向的页面方向

但是横向页面中的内容似乎以纵向呈现。

从这个小提琴中可以看出

我也将body css标记为

有人可以指导我如何在横向页面的横向模式下呈现页面内容,而不会剪切内容。

PS在chrome中检查这个

0 投票
0 回答
34 浏览

html - 页眉与打印预览模式中的内容重叠

我正面临从第 2 页向下的标题的内容重叠问题。我已经制作了标题 ( position: fixed;) 用于在每个页面中显示,并且只有一次声明。

如果我要使用@page 边距,它将在页面周围添加边距,但不能解决重叠问题。使用@page margin 固定标题也随着内容向下移动。

我需要从标题到内容添加边距。

0 投票
2 回答
258 浏览

css - 使用 CSS @page :first 更改打印边距会导致其他页面截断文本

我正在尝试格式化网页以进行打印。第一页是带有全出血背景的封面。其余页面有边距。

第一页看起来很完美,没有边距,但所有剩余的有边距的页面都被切断了文本。

0 页边距的第一页

内页 2cm 页边距

问题似乎是第一页。当我注释掉第一页的 margin: 0 时,所有剩余的页面看起来都是正确的。

第一页有 2 厘米的边距

内页 2 厘米边距

是否有使用 @page :first 更改边距的正确方法,不会影响其余页面?

0 投票
0 回答
62 浏览

html - page-break-after 不适用于 Chrome 中的表 tr

我正在使用表格生成打印报告。该表有多行;在打印页面时,每 15 行需要一个分页符

为此,我已申请

问题是什么?

  • 将样式 page-break-after 应用于 tr 时,分页符不起作用,请参见此处

  • 但是当将 display:block 应用于 tr 时,它会给出所需的结果,但是在将 tr display:table-row 更改为 display:block 后,表格的布局被扭曲了,请参见此处。我试过火狐,那里没问题。