Javascript 调整页面内容以适合一页打印

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12565541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 10:43:39  来源:igfitidea点击:

Resize page contents to fit on one print page

javascriptcssweb-applications

提问by Rahi

This problem IMO is more related to CSS but I am open to any solution. I am trying to print a webpage who's height is defined in px (I also tried %). Now What's happening in Safari and IE 8 and onwards, page contents will not print on one page.

这个问题 IMO 与 CSS 更相关,但我对任何解决方案持开放态度。我正在尝试打印一个以 px 定义高度的网页(我也尝试过 %)。现在在 Safari 和 IE 8 及更高版本中发生了什么,页面内容不会打印在一页上。

Current Setup

当前设置

div.parent-container{  
    height: 900px;  
}  

div.parent-container div.child-containers{  
    height:100%;  
} 

What's happening

发生了什么

It will print everything on one page in FF but in IE and Safari contents will split in to two pages which is heck of a problem for my users. I have to tell them to set page-margins: 0.3 which is definitely not an efficient way.

它将在 FF 中的一页上打印所有内容,但在 IE 和 Safari 中,内容将分成两页,这对我的用户来说是一个问题。我必须告诉他们设置 page-margins: 0.3 这绝对不是一种有效的方法。

What I have done

我做了什么

I have tried different @page and browser specific hacks to make it work but it doesn't prove to be fruitful OR doesn't seem efficient to me( Never been a fan of customized browser hacks).

我尝试了不同的@page 和特定于浏览器的黑客来使其工作,但它并没有证明是富有成效的,或者对我来说似乎没有效率(从来不是定制浏览器黑客的粉丝)。

What I want

我想要的是

CSS/JS solution to make page contents print on one page may be something like 'Shrink to Fit'.

使页面内容打印在一页上的 CSS/JS 解决方案可能类似于“缩小以适应”。

Thanks, Rahi

谢谢,拉希

采纳答案by Dawson

Printing devices usually measure their content in physical dimmensions (in, cm, ft, etc). Pixel width is dependent on monitor resolution, and thus can't be relied upon for every output device.

打印设备通常以物理尺寸(英寸、厘米、英尺等)来测量其内容。像素宽度取决于显示器分辨率,因此不能依赖于每个输出设备。

If it's crucial your page prints the way you'd like it, you'll most likely need a CSS file designed for printing -- one that uses inches, centimeters, or whatever you'd like.

如果您的页面以您喜欢的方式打印很重要,那么您很可能需要一个专为打印而设计的 CSS 文件——使用英寸、厘米或任何您喜欢的格式。

Check out this previous post-- I think it will help.

查看之前的帖子——我认为它会有所帮助。