如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框，所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格，其中一个包含了我想打印的div -表格是用web的视觉样式设计的，不应该显示在打印中。
当前回答
使用特殊的样式表进行打印
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
然后添加一个类，即。"noprint"到每个你不想打印的内容的标签。
在CSS中使用
.noprint {
display: none;
}
其他回答
适合空间空高度的最佳css:
@media print {
body * {
visibility: hidden;
height:0;
}
#section-to-print, #section-to-print * {
visibility: visible;
height:auto;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
没有CSS小丑，html和纯javascript与iframe工作最好。然后只需点击文本，你想打印。带有文本内容的id元素的当前示例;
html的身体:
<div id="monitor" onclick="idElementPrint()">text i want to print</div>
纯javascript:
//or: monitor.textContent = "click me to print textual content";
const idElementPrint = () => {
let ifram = document.createElement("iframe");
ifram.style = "display:none";
document.body.appendChild(ifram);
pri = ifram.contentWindow;
pri.document.open();
pri.document.write(monitor.textContent);
pri.document.close();
pri.focus();
pri.print();
}
您是否可以使用打印样式表，并使用CSS来排列想要打印的内容?阅读这篇文章获取更多的建议。
如果你只想打印这个div，你必须使用指令:
@media print{
*{display:none;}
#mydiv{display:block;}
}
嗯……使用样式表的类型进行打印…例如:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css:
div { display: none; }
#yourdiv { display: block; }
