我正在尝试在 HTML 中实现打印功能。我知道我可以用 打印整个页面window.print()，但是如何只打印特定的页面元素？例如特定的<DIV>Some text to print</DIV>.
如何仅打印选定的 HTML 元素？
IT技术
javascript
html
2021-03-14 07:17:19
6个回答
您可以使用打印特定的 CSS 样式表并隐藏除您要打印的内容之外的所有内容。
<div class="no-print">I won't print</div><div class="something-else">I will!</div>
只是no-print类将被隐藏，但任何带有打印类的都会显示。
<style type="text/css" media="print">
.no-print { display: none; }
</style>
如果你熟悉 jQuery，你可以像这样使用jQuery Print Element插件：
$('SelectorToPrint').printElement();
创建了可用于任何 HTML 元素的通用内容
HTMLElement.prototype.printMe = printMe;
function printMe(query){
var myframe = document.createElement('IFRAME');
myframe.domain = document.domain;
myframe.style.position = "absolute";
myframe.style.top = "-10000px";
document.body.appendChild(myframe);
myframe.contentDocument.write(this.innerHTML) ;
setTimeout(function(){
myframe.focus();
myframe.contentWindow.print();
myframe.parentNode.removeChild(myframe) ;// remove frame
},3000); // wait for images to load inside iframe
window.focus();
}
用法：
document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();
希望这有助于
问候
拉夫•库拉纳
如果您使用的是 JQuery，则可以使用clone来执行以下操作：
function printElement(e) {
var ifr = document.createElement('iframe');
ifr.style='height: 0px; width: 0px; position: absolute'
document.body.appendChild(ifr);
$(e).clone().appendTo(ifr.contentDocument.body);
ifr.contentWindow.print();
ifr.parentElement.removeChild(ifr);
}
并像这样使用：
printElement(document.getElementById('myElementToPrint'))
如果我理解你，你可以使用 CSS3 来打印你选择的 HTML 元素。
@media print {
body.print-element *:not(.print) {
display: none;
}
}
请注意，您只需要一个选择器。这允许您使用 CSS 类轻松打印元素或整个页面。
在这里您可以查看一个工作示例：https : //jsfiddle.net/gengns/d50m8ztu/