如何打印特定的div区域？
如何打印特定的div区域？
提问于 2021-02-03 17:23:18
我正在添加打印功能(作为一个按钮)到我的项目。具体地说，当用户按下“打印”按钮时，用户可以打印日历特定div区域(不仅是div内容)。
我尝试了下面的代码，但它没有打印整个div区域，第二个问题是，在运行此代码后，我无法在浏览器上执行任何操作(页面已死)。顺便说一下，它也只打印div内容。
on(dijit.byId("printCalendarButton"), "click", function(event) {
var calendarContainer = dojo.byId("calendarContainer").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = calendarContainer;
window.print();
document.body.innerHTML = originalContents;
});我也尝试过css，但它也只打印页面的一部分：
@media print {
body * {
visibility: hidden;
}
#calendarContainer * {
visibility: visible;
}
#calendarContainer {
position: absolute;
left: 0;
top: 0;
}
}打印问题：
有什么好主意吗？谢谢!
回答 1
Stack Overflow用户
发布于 2021-02-03 19:18:37
以下是打印单个元素及其内容所需的基本打印安排。特别要注意CSS，当你用body *隐藏正文中的所有元素时，这也会隐藏要打印的元素。
要将可打印元素带到打印视图中，必须显示它们。这是使用#printable, #printable * {display: block;}规则创建的。这里的#printable *很重要，因为body *规则通过类型隐藏了body中的所有元素。因为类型有更高的specifity，所以我们不能用任何其他选择器覆盖它。
要使body *按预期工作，即隐藏页面上的所有内容，body中不能有孤立的文本节点，所有内容都必须包含在元素中。
const but = document.querySelector('#printButton');
but.addEventListener('click', e => {
window.focus();
window.print();
});@media print {
body * {
display: none;
}
#printable, #printable * {
display: block;
}
}<p>Some text visible on the screen only.</p>
<div id="printable">
<p>This element is printed only (with its wrapper), but is visible also on the screen.</p>
</div>
<button id="printButton">Print</button>
<p>More text visible on the screen only.</p>
如果内容只显示在纸上的一部分，您必须缩放它以适应纸张，或将其拆分到多个页面。也有可能，现有的规则正在定义边距和其他东西。如果是这种情况，您也必须在打印规则中覆盖这些规则。媒体查询不会排除现有规则，如果没有被覆盖，它们仍然会被应用。
你可以使用a demo at jsFiddle，它还展示了孤立的文本节点是如何打印的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66024544
复制相关文章
相似问题
腾讯云开发者
