Html 如何打印可滚动的 DIV 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16848669/
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
How to print scrollable DIV content
提问by tazboy
There is a website that I would like to print the divcontent of. The problem is that the div is scrollable and I'm not able to print all the content. I've tried display:noneon all the divs except the one I want to print and then used the Awesome Screenshot extension for Google Chrome but it won't scroll just that div.
有一个网站，我想打印其div内容。问题是 div 是可滚动的，我无法打印所有内容。我已经尝试display:none了除我想打印的所有 div 之外的所有 div，然后使用了 Google Chrome 的 Awesome Screenshot 扩展程序，但它不会只滚动那个 div。
I've read about using Javascript in the HTML, I'm guessing, but I don't know how to use that code. It's not my website so how do I inject that code so that it will print the content?
我读过有关在 HTML 中使用 Javascript 的内容，我猜，但我不知道如何使用该代码。这不是我的网站，所以我如何注入该代码以打印内容？
回答by Porschiey
I'm not sure what website you're using - but in IE you can open up F12 Developer tools, find the div you want to display, and modify the style on the fly:
我不确定您使用的是哪个网站 - 但在 IE 中您可以打开 F12 开发人员工具，找到您想要显示的 div，并即时修改样式：
{
display: block;
width: auto;
height: auto;
overflow: visible;
}
It would then cause the div to display all it's content, without scrollbars... hopefully this helps!
然后它会导致 div 显示它的所有内容，没有滚动条......希望这会有所帮助！
回答by Paul Roub
Without seeing the page or knowing its layout, it's hard to know what to suggest that won't look horrible.
如果没有看到页面或不知道它的布局，很难知道什么建议不会看起来很糟糕。
But, if hiding all other content (in a print stylesheet, I assume) works, you may then be able add:
但是，如果隐藏所有其他内容（我假设在打印样式表中）有效，那么您可以添加：
@media only print {
#idOfYourDiv {
width: auto;
height: auto;
overflow: visible;
}
}
to show all the contents at once.
一次显示所有内容。
回答by AbhiNickz
Use this JS function:
Printable DIV is div1
使用这个JS函数：
Printable DIV is div1
function printpage(){
var originalContents = document.body.innerHTML;
var printReport= document.getElementById('div1').innerHTML;
document.body.innerHTML = printReport;
window.print();
document.body.innerHTML = originalContents;
}
回答by DavidTaubmann
Make all parents visible
让所有父母都可见
I've struggled some hours with this and finally noticed the problem was that some of the parent tags where preventing the div to be fully visible, and instead a scrollbar from some parent tags was being visible on the print.
我为此苦苦挣扎了几个小时，终于注意到问题是某些父标签阻止 div 完全可见，而某些父标签的滚动条在打印时可见。
So the final effective solution was to apply all the rules (mentioned in other answers) to all possible parent tags that could be in the middle, including also an !importantrule so they wouldn't be bypassed.
因此，最终有效的解决方案是将所有规则（在其他答案中提到）应用于可能位于中间的所有可能的父标签，还包括一条!important规则，这样它们就不会被绕过。
Like this:
像这样：
@media print {
body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
display: block !important;
position: relative !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
margin-left: 0 !important;
}
}
This applies for almost any case in my projects.
这几乎适用于我的项目中的任何情况。
回答by ManSamVampire
My answer is based on the ones given by @Porschieyand @Paul Roubwith a slight addition.
我的回答基于@ Porschiey和@ Paul Roub给出的答案，并稍作补充。
Their given solution did work for me in most cases except for some where the <div>that I wanted to print had a CSS set to position: fixed. In the resulting print, this would usually contain only the content that was able to fit in the actual size of the <div>on the loaded page.
So, I also had to change the position CSS attribute to something like relativeso that everything could get printed. So, the resulting CSS that worked for me is this:-
他们给定的解决方案在大多数情况下对我有用，除了一些<div>我想打印的 CSS 设置为position: fixed. 在结果打印中，这通常只包含能够适应<div>加载页面实际大小的内容。
因此，我还必须将位置 CSS 属性更改为类似的内容，relative以便可以打印所有内容。所以，对我有用的结果 CSS 是这样的：-
{
display: block; /* Not really needed in all cases */
position: relative;
width: auto;
height: auto;
overflow: visible;
}
