在Chrome中打印重复的页眉

zzi*_*r72 19 html javascript css jquery google-chrome

有没有人有一个文章的链接或专门从Chrome重复页面页眉/页脚的工作示例?

背景:
我花了好几天没有运气,有几个Stack提出的解决方案,但似乎没有工作(在Chrome中).由于我们在工作中使用Chrome,我只在那里测试过,所以下面有很多人说Chrome不能做到,但也许我忽略了一些东西?

我试过这些Stack链接(..还有更多):

在所有浏览器(Chrome)上从网站的每个打印页面打印页脚

有没有办法在每个页面上打印网页页眉/页脚?

如何使用HTML在文档的每个打印页面上打印页眉和页脚?

使用CSS创建页眉和页脚以进行打印

如果我不能,请使用重复的页眉/页脚...然后我的下一个想法是计算我的克隆对象中的行并让它以最大数量打破,创建一个新页面(强制高度)并再次启动循环另一个div的另一页.

我非常感谢有关运行页眉/页脚解决方案的任何建议,因为我的应用程序的重点是完成的打印提案.

zzi*_*r72 25

好吧,没有人参与这个,所以再过几天环顾四周,选择不写自己的解决方案,这就是我找到的.

在没有投票和没有评论的Stack帖子的最底部是这个孤独的小链接:http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243

这件事很棒,它的设计目的是处理大量内容,并将它们格式化为像报纸一样的列.它特别好地处理分页符并且非常灵活.

在我的情况下,我需要一个列(页面的宽度)和重复页眉和页脚.我使用Example 10作为我的基础:http://welcome.totheinter.net/autocolumn/sample10.html

我只是添加了插件的链接,更改了必要的ID和类以适应我的页面,并对高度和宽度进行了一些小的CSS更改,我能够在Google Chrome中打印重复页眉和页脚的多页内容!(我公司的首选浏览器)

提示:

  • 一个小CSS技巧,我做了内容div MIN-HEIGHT设置,所以它在短页面上推下了页脚.(如果您希望用户选择纵向或横向,请不要这样做).我的最终印刷是固定的,所以这对我来说很棒.

  • 我测试了内容的不同高度,看它是如何打破内容的,每次都很流畅.

我确实尝试在JsBin和Fiddle中发布我的最后一个例子,但每次都运行错误.

所以再一次,上面的示例10是一个很好的起点,因为它显示在之前和之后.

这是我的最终版本,具有可变高度内容和重复的页眉和页脚:(这是我在Chrome中单击浏览器打印链接/按钮时的视图) 在此输入图像描述

更新7/2014: Chrome再次成为我印刷问题的祸根.我在下面看到了关于我提供的链接的评论.他是对的,它渲染正确,但打印视图不正确.对此感到抱歉,但它仍然是一个很好的例子来学习设置.

我仍在使用这个解决方案,IT DOES工作,但你必须调整CSS和JS var的正文内容大小.大小调整组合非常敏感,但是当您获得正确的页面高度/宽度和正确的内容大小时,它确实有效.我必须为纸张尺寸legal/letter写单独的函数.它有限但适用于我们的目的.

我还注意到,根据我的窗口大小,它并不总是看起来正确,但最终的PRINTED产品是重复页眉和页脚的预期,所以我使用了一个直接打印的窗口,因此用户没有注意到输出,而是看到了chrome打印渲染.我讨厌这些类型的解决方法,但我办公室里的每个人都使用Chrome,这是一个必要的恶魔.


归档时间:

查看次数:

42513 次

最近记录:

7 年,7 月 前