问题标签 [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.
css - 如何使用 print-CSS 拆分长 HTML 表格,以便第一页表格中的拆分为页面底部的 div 留出空间?
我有一个显示在浏览器窗口中的多页文档。文件是一张长桌和一个图例。
我希望表格在页面底部之前停止打印大约 300 像素,然后打印图例,然后继续在第二页上打印表格。
红线表示我希望桌子打破的地方。
如何 ?
到目前为止我所拥有的:
目前,我能够使用下面的 CSS 打印第一页底部的图例:
但是我的表格正打印在图例 div 上,将自身叠加在图例上。
我需要的是表格 div 在图例 div 之前停止打印,然后打印图例 div,然后在下一页继续表格。
黑客 #1
我可以通过使用在某一行强制分页符
这有点工作,但不是很好,因为它是硬编码的。表格数据变化,表格边框上下移动。
理想情况下,我想找到一种更好的方法来处理这些问题。
html - 谷歌浏览器在不同的计算机上处理分页符的方式不同
我正在为 Web 应用程序中呈现的报告最终确定打印样式表,并且已收到有关不同机器上的一些打印问题的通知。在我的页眉之前添加分页符时,我注意到大量添加的空白,这似乎与分页符有关。当我background-color: green
在页面的页眉或页脚中添加 , 等时,空白显然不是由于任何一个。我的 Windows 10 操作系统机器和我作为备份的 Mac 操作系统都创建了一个打印预览文档,该文档按照我的预期尊重分页符,但另一台运行 Windows 10 的机器显示了添加的空白。
更新- 遇到分页符问题的其中一台机器仅在特定 WiFi 连接上遇到问题。当连接到我工作位置的WiFi时,问题似乎从他的机器上消失了,但是当连接到他工作位置的WiFi时,问题又出现了。很诡异....
我正在申请page-break-before: always
我的标题内容,我的网站代码如下:
最后,这是我所指的添加的空白区域的屏幕截图:
很高兴在必要时提供更多的清晰度,我只是用这个把头撞到墙上。
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
css - print.css 在不同的浏览器上看起来不同
我有一个用户可以打印的页面。但是打印不应该只打印某些元素。
所以我有一个 print.css 文件来处理这个问题:
我在我的 Ubuntu 机器上使用 Chrome 版本 79.0.3945.88 进行开发。所以当我点击Ctrl + P
一切看起来都很好。
但是一旦我使用 Chrome 版本 80.0.3987.163 部署并从我的 Windows 机器上检查,格式都是错误的。字体太大,导致打印页面上只显示一半。
我尝试使用诸如22px
字体大小之类的设置值来代替,2.5em
但这并没有改变任何东西。事实上,我必须进入高级设置并将比例从“默认”设置为“自定义 60%”,然后使打印页面看起来像我在开发机器上的打印页面。
为什么有区别?我想既然我使用 % 和 em 它应该在每个地方看起来都一样?
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。
是什么赋予了?
html - 为什么媒体打印中横向页面的内容隐藏
我正在尝试以纵向和横向打印页面。
我已经设法使用以下 css 片段获得横向的页面方向
但是横向页面中的内容似乎以纵向呈现。
从这个小提琴中可以看出
我也将body css标记为
有人可以指导我如何在横向页面的横向模式下呈现页面内容,而不会剪切内容。
PS在chrome中检查这个
html - 页眉与打印预览模式中的内容重叠
我正面临从第 2 页向下的标题的内容重叠问题。我已经制作了标题 ( position: fixed;
) 用于在每个页面中显示,并且只有一次声明。
如果我要使用@page 边距,它将在页面周围添加边距,但不能解决重叠问题。使用@page margin 固定标题也随着内容向下移动。
我需要从标题到内容添加边距。
css - 使用 CSS @page :first 更改打印边距会导致其他页面截断文本
我正在尝试格式化网页以进行打印。第一页是带有全出血背景的封面。其余页面有边距。
第一页看起来很完美,没有边距,但所有剩余的有边距的页面都被切断了文本。
问题似乎是第一页。当我注释掉第一页的 margin: 0 时,所有剩余的页面看起来都是正确的。
是否有使用 @page :first 更改边距的正确方法,不会影响其余页面?