HTML打印与绝对的发布

前端之家收集整理的这篇文章主要介绍了HTML打印与绝对的发布前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以打印具有真正绝对定位元素的HTML页面?似乎所有的浏览器都在这里做很大的麻烦。通过绝对单位(例如cm)定义身体是容易的,并通过位置绝对内容放置元素。但是,每个浏览器似乎都试图使这样一个页面无法打印。例如,FF是添加打印边距,即使在linux上打印到PDF,尽管页边设置为0页。 Chrome在各种情况下都似乎缩小了页面
那么如何打印绝对定位的东西,例如。纸张形式字段,标记等?
我有监督的东西吗

解决方法

可悲的是, CSS3 Module: Paged Media允许所有这一切发生。这是关于太大页面的规则:

07001

If a page Box does not match the target page sheet dimensions,the user agent MAY choose (in order of preference) to:

  • Render the page Box at the indicated size on a larger page sheet.
  • Rotate the page Box 90° if this will make the page Box fit the page sheet.
  • Scale the page Box to fit the page sheet. (There is no requirement to maintain the aspect ratio of the page or of any elements on the page when scaling; however,preservation of the aspect ratio is preferred.) [done by Chrome]
  • Reformat the page contents,including ‘spilling’ onto other page sheets. [done by many other or older browsers]
  • Clip overflowed content (least preferred).

The user agent should consult the user before performing these operations.

07002

When the page Box is smaller than the page size,the user agent should center the page Box on the sheet since this will align double-sided pages and avoid accidental loss of information that is printed near the edge of the sheet.

这是打破你所有定位的东西的规则:

3.7. 07003

[…] Also,when Boxes are positioned absolutely,they MAY end up
in “inconvenient” locations. For example,images MAY be placed on the
edge of the page Box. Similarly when Boxes use fixed or relative
positioning,they MAY also end up outside of the page Box.

A specification for the exact formatting of such elements lies outside
the scope of this document. However,we recommend that authors and
user agents observe the following general principles concerning
content outside the page Box:

  • User agents SHOULD avoid generating a large number of empty page Boxes to honor the positioning of elements (e.g.,you don’t want to
    print 100 blank pages). Note,however,that generating a small number
    of empty page Boxes MAY be necessary to honor the ‘left’ and ‘right’
    values for ‘page-break-before’ and ‘page-break-after’.
  • Authors SHOULD not position elements in inconvenient locations just to avoid rendering them. Instead:
    • To suppress Box generation entirely,set the ‘display’ property to ‘none’.
    • To make a Box invisible,set the ‘visibility’ property.
  • User agents MAY handle Boxes positioned outside the page Box in several ways,including discarding them or creating page Boxes for
    them at the end of the document.

看看第3.7节的第二段:对这些元素的确切格式的规范在本文档的范围之外。既然没有其他文件,没有其他的指导,那么这个段落的一般原则,每个浏览器都可以做任何它想要的。

这是CSS3模块目前的缺陷之一。不过,我认为CSS4或修订的CSS3模块无法删除这些缺陷,因为各种可能的样式表和结果的布局太大了。还要注意一点footnote given in CSS Print Profile

‡ The printer MAY ignore positioned elements that are placed on the page before the position of the current element in the normal flow.

因此,基本上无法在每个浏览器中创建相同的效果。目前,实现便携式文档的唯一可能方式是使用第三方应用程序或通过PDF打印机和最喜欢的浏览器创建PDF。只要W3C的建议不严格或者浏览器厂商实现任何想要的方式,其他方式都会失败。

也可以看看:

> CSS3 Module: Paged Media(工作草案,2006年最后修订版)
> CSS Print Profile(工作草案,2006年最后修订版)

补充笔记

如果您有一堆位置:需要打印的绝对元素,有时元素实际上需要定位是绝对的,或者如果以稍微不同或更简单的方式实现相同的效果,则有时是一个很好的问题。另请注意,您应该在打印媒体不是真正需要的每个元素上使用display:none,例如广告,导航等…

猜你在找的HTML相关文章