如何在 Chrome 或 Firefox 中打印特定的 HTML 元素而不是整个页面？
Posted
技术标签:
【中文标题】如何在 Chrome 或 Firefox 中打印特定的 HTML 元素而不是整个页面？【英文标题】：How to print a specific HTML element and not the full page in Chrome or Firefox? 【发布时间】：2016-07-12 05:41:55 【问题描述】：假设我想打印（或转换为 PDF）复杂 html 页面的特定区域（例如，div）。如何在 Chrome 或 Firefox 中做到这一点？我没有从“检查元素”功能中找到特定选项。
【问题讨论】：
【参考方案1】：我知道这是一个相当古老的话题，但这里对我有用：
<div id="parent_div">
<p>NOT to be printed</p>
<div id="print_div">
Print this!
</div>
<button id="print_now" onclick="PrintDiv('print_div')">
</div>
还有JS函数：
function PrintDiv(div_id)
$('body').css("visibility", "hidden");
$("#"+div_id).css("visibility", "visible");
window.print();
$('body').css("visibility", "visible");
如果您不使用 jQuery，您仍然可以使用以下方式更改 CSS：
document.getElementById("body").style.visibility = "hidden";
document.getElementById(div_id).style.visibility = "visible";
【讨论】：
【参考方案2】：试试这个。我也在***中找到了这个:)
试试这个，这是解决问题的好例子
函数 PrintElem(elem) 弹出($(elem).html());
function Popup(data)
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
</script>
</head>
<body>
<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
<div>
This will not be printed.
</div>
<div id="anotherdiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />
</body>
【讨论】：
没有集成解决方案吗？【参考方案3】：通过使用仅打印media query，这是introduced in CSS3 的一项功能
假设它由id 或class 选择器标识，则将display: none 应用于它，而不是visibility: hidden，因为显示不仅控制元素的显示，还控制占用的空间在文档中，与可见性不同，可见性隐藏它但仍然让它占据它的空间。
所以它应该看起来像这样：
#container
background-color: blue;
padding: 1rem;
#display-test
background-color: lightgreen;
#visibility-test
background-color: lightblue;
#display-test,
#visibility-test
color: white;
padding: 1rem;
margin: 1rem 0 1rem 0;
#print-display-test,
#print-visibility-test
color: white;
display: none;
@media only print
#display-test
display: none;
#visibility-test
visibility: hidden;
#print-display-test,
#print-visibility-test
display: block;
<div id="container">
<div id="display-test">
This is a display test
</div>
<span id="print-display-test">
This is going to show at the start of the page
</span>
<div id="visibility-test">
This is a visibility test
</div>
<span id="print-visibility-test">
This is going to show far apart from the text above
</span>
<br>
<button type="button" onclick="window.print()">
Print this
</button>
</div>【讨论】：
以上是关于如何在 Chrome 或 Firefox 中打印特定的 HTML 元素而不是整个页面？的主要内容，如果未能解决你的问题，请参考以下文章
从 chrome 或 firefox 中的调试控制台对 .js 文件运行 JSLint
Chrome 和 Mozilla Firefox 中的不同打印预览
如何在 Chrome 或 Firefox 浏览器上运行 javascript