带绝对位置的HTML打印
是否可以将带有真正绝对定位元素的HTML页面打印到纸上?看起来所有的浏览器在这里都搞得一团糟。通过绝对单位(如厘米)定义实体很容易,通过带绝对位置的HTML打印,html,css,printing,Html,Css,Printing,是否可以将带有真正绝对定位元素的HTML页面打印到纸上?看起来所有的浏览器在这里都搞得一团糟。通过绝对单位(如厘米)定义实体很容易,通过位置:绝对放置元素也很容易。然而,每个浏览器似乎都试图使打印这样的页面变得不可能。例如,FF添加了打印页边距,即使在linux上打印到PDF时,尽管页面设置为0边距。Chrome似乎在任何情况下都会缩小页面。 那么,如何打印具有绝对定位的内容,例如纸张表单字段、标记等。? 我忽略了什么吗?使您的容器具有相对位置。这是在每个屏幕和纸张上将绝对位置元素保持在同一位置
位置:绝对放置元素也很容易。然而,每个浏览器似乎都试图使打印这样的页面变得不可能。例如,FF添加了打印页边距,即使在linux上打印到PDF时,尽管页面设置为0边距。Chrome似乎在任何情况下都会缩小页面。
那么,如何打印具有绝对定位的内容,例如纸张表单字段、标记等。?
我忽略了什么吗?使您的容器具有相对位置。这是在每个屏幕和纸张上将绝对位置元素保持在同一位置的唯一方法。因此,如果您的主div(所有内容所在的div)将以下内容添加到css中:
#maindivname{position:relative;}
应该这样做。使用页面设置设置边距是打印HTML
页面或DIV
的首要解决方案
毕竟会出现意想不到的结果,那么你需要在HTML
页面上进行一些挖掘
使用java脚本创建一个没有标题栏或任何自定义栏的窗口,并将所有原始数据以位置:relative
放入该窗口,同时将媒体类型设置为print
position:relative;
media:print;
希望这会有帮助。正如你所说,网络浏览器在打印时往往会做一些疯狂的事情。面向打印的引擎通常更好
是一个开源引擎,可呈现为PDF格式,支持绝对定位以及设置页面边距:
@page{margin:1cm/*或0,如果需要*/}
不幸的是,政府允许所有这一切发生。以下是关于太大页面的规则:
如果页面框与目标页面页尺寸不匹配,则用户代理可以选择(按优先顺序):
- 在较大的页面上以指定的大小呈现页面框
- 如果这将使页面框适合页面,请将页面框旋转90°
- 缩放页面框以适合页面。(缩放时不需要保持页面或页面上任何元素的纵横比;但是,最好保持纵横比。)【由Chrome完成】
- 重新格式化页面内容,包括“溢出”到其他页面。[由许多其他或更老的浏览器完成]
- 剪辑溢出的内容(首选项最少)
在执行这些操作之前,用户代理应咨询用户
当页面框小于页面大小时,用户代理应将页面框居中放置在图纸上,因为这将对齐双面页面,避免打印在图纸边缘附近的信息意外丢失
这条规则打破了你所有的立场
ed东西:
3.7
[…]此外,当箱子绝对定位时,它们可能会最终
在“不方便”的地方。例如,图像可以放置在屏幕上
页面框的边缘。同样,当框使用固定或相对时
定位时,它们也可能最终位于页面框之外
这些元素的精确格式规范在外部
本文件的范围。但是,我们建议作者和
用户代理遵守以下关于
页面框外的内容:
- 用户代理应该避免生成大量的空页面框来支持元素的定位(例如,您不想
打印100页空白页)。但是,请注意,生成一个小数字
空页框的数量可能是尊重“左”和“右”的必要条件
“之前分页符”和“之后分页符”的值
- 作者不应该仅仅为了避免渲染而将元素放置在不方便的位置。相反:
- 要完全抑制框生成,请将“显示”属性设置为“无”
- 要使长方体不可见,请设置“可见性”属性
- 用户代理可以通过多种方式处理位于页面框外部的框,包括丢弃它们或为其创建页面框
他们在文件的末尾
查看第3.7节第二段:此类元素的精确格式规范不在本文件范围内。由于没有其他文件和指南,因此本段后面的一般原则是,每个浏览器都可以随心所欲
这是CSS3模块目前存在的缺陷之一。然而,我认为CSS4或修改后的CSS3模块无法消除这些缺陷,因为可能的样式表和结果布局的种类太多了。还要注意一点:
——打印机可能会忽略页面上位于正常流程中当前元素位置之前的已定位元素
因此,基本上不可能在每个浏览器中创建相同的效果。就目前而言,实现便携文档的唯一可能方法是使用第三方应用程序或通过PDF打印机和您最喜欢的浏览器创建PDF。只要W3C的建议不严格,或者浏览器供应商实现他们想要的任何东西,任何其他方法都注定会失败
另见:
- (工作草案,2006年最后修订)
- (工作草案,2006年最后修订)
附加说明
如果您有一堆需要打印的position:absolute
元素,那么有时一个很好的问题是一个元素是否确实需要绝对定位,或者是否可以通过稍微不同或更简单的方式实现相同的效果。还请注意,对于印刷媒体(如广告)不真正需要的每个元素,应使用display:none
,