如何打印指定的div(无需手动禁用页面上的所有其他内容)？

我想避免使用新的预览对话框,因此使用此内容创建新窗口无用.

该页面包含几个表格,其中一个表格包含我要打印的div - 该表格采用网页的视觉样式设计,不应该以打印方式显示.

1> Bennett McEl..：

---

这是一个通用的解决方案,仅使用CSS,我已经验证了它的工作原理.

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

替代方法并不是那么好.使用display是棘手的,因为如果有任何元素,display:none那么它的后代都不会显示.要使用它,您必须更改页面的结构.

使用visibility效果更好,因为您可以打开后代的可见性.隐形元素仍会影响布局,所以我移动section-to-print到左上方,以便正确打印.

---

使用此解决方案需要注意的一个问题是,在某些情况下,最终可能会打印出数千个空白页.在我的情况下,我能够通过使用一些额外的显示来解决这个问题:没有选定项目的样式,但也许更通用的解决方案是通过强制高度,溢出:无和所有div或其他东西的绝对定位的某种组合可实现的.

---

这是迄今为止最快,最干净的方式,我想知道为什么这个答案没有得到最多的选票-.-

---

这是一个很好的开始,但我遇到了两个问题:如果任何元素的父母建立了自己的相对/绝对定位,那么内容仍将被抵消,除非我使用`position:fixed`代替.但是,Chrome和Safari也会截断内容,尤其是在第一页之后.所以我最后的解决方法是将目标*和*_all的parent_都设置为`overflow:visible; 位置:绝对!重要; 顶部:0;左:0`

---

您可以尝试使用JavaScript解决方案,但如果您的用户使用浏览器的"打印"命令,则无法使用.

2> Kevin Florid..：

---

用最少的代码我有一个更好的解决方案.

将您的可打印部分放在一个id为div的div中:

      
Print me

然后像onclick一样添加一个事件(如上所示),并像上面一样传递div的id.

现在让我们创建一个非常简单的javascript:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

请注意这是多么简单？没有弹出窗口,没有新窗口,没有疯狂的样式,没有像jquery这样的JS库.真正复杂的解决方案的问题(答案并不复杂,而不是我所指的)是它永远不会在所有浏览器中翻译的事实!如果要使样式不同,请通过将media属性添加到样式表链接(media ="print")来执行已检查答案中所示的操作.

没有绒毛,轻巧,它只是工作.

---

@asprin警告!这不是乱码免费代码.使用innerHTML擦除然后重新创建整个主体对于简单页面来说很好,但是通过更高级的自定义(菜单,幻灯片等),它可以擦除由其他脚本添加的一些动态行为.

---

此解决方案不适用于任何复杂页面,其中可打印区域中的元素取决于父元素的样式和/或位置.如果你提取可打印的div,它可能看起来完全不同,因为所有的父母现在都缺失了.

---

@BorisGappov是一个非常简单的例子,只需点击一下即可证明我的观点:http://jsfiddle.net/dc7voLzt/我会再说一遍:这不是乱码!问题不在于打印本身,而在于恢复原始页面!

3> Greg..：

---

所有的答案至今都还存在缺陷-他们要么涉及添加class="noprint"到任何东西,或者会搞乱display内#printable.

我认为最好的解决方案是围绕不可打印的东西创建一个包装器:

    


    

        Your normal page contents
    

    

        Printer version
    

当然这并不完美,因为它涉及到你的HTML中移动一些东西......

---

我更喜欢使用语义HTML.理想情况下,打印格式应由CSS处理.请参阅我的答案:http://stackoverflow.com/questions/468881/print-div-idprintarea-div-only/2618980#2618980

4> romaninsh..：

---

使用jQuery,它就像这样简单:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

---

诀窍是在用户生成的事件上调用它,例如鼠标单击.你也可以在第一行后添加:if(!w)alert('Please enable pop-ups');

---

这非常酷,但它在Chrome中显示为阻止弹出窗口.

---

我用这打印时丢了css,有没有办法保持CSS？

---

@MoxetKhan,这篇文章有一个css的解决方案http://vevlo.com/how-to-print-div-content-using-javascript/

5> Paul Dixon..：

---

您可以使用打印样式表,并使用CSS来排列您想要打印的内容吗？阅读本文以获取更多信息.

6> Christian Ma..：

---

这很好用:

请注意,这仅适用于"可见性"."显示"不会这样做.在FF3中测试过.

---

我可以免费在我的项目中使用此代码吗？

7> fanfavorite..：

---

我并不喜欢这些答案中的任何一个.如果你有一个类(比如printableArea)并将它作为body的直接子项,那么你可以在你的print CSS中做这样的事情:

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

使用可见性可能会导致很多间距问题和空白页面.这是因为可见性维护元素空间,只是使其隐藏,显示将其移除,并允许其他元素占用其空间.

这个解决方案的工作原理是你不是抓住所有元素,只是身体的直接孩子并隐藏它们.下面的其他解决方案使用display css,隐藏所有元素,这些元素会影响printableArea内容中的所有内容.

我不建议使用javascript,因为您需要有一个用户点击的打印按钮,标准浏览器打印按钮不会产生相同的效果.如果你真的需要这样做,我会做的是存储正文的html,删除所有不需要的元素,打印,然后再添加html.如上所述,如果可以并且使用上面的CSS选项,我会避免这种情况.

注意:您可以使用内联样式将任何CSS添加到打印CSS中:

或者像我通常使用的是链接标记:

8> 小智..：

---

给出你想要打印id的任何元素printMe.

在头标记中包含此脚本:

调用该函数

Print

9> Andreas Nied..：

---

嗯...使用样式表的类型进行打印...例如:

print.css:

div { display: none; }
#yourdiv { display: block; }

10> Hardik Thake..：

---

第1步:在head标签中写下以下javascript

第2步:通过onclick事件调用PrintMe('DivID')函数.

here is some text to print inside this div with an id 'divid'

11> Dilip Kr Sin..：

---

---

看起来不错,但你打印后松开所有的javascript绑定和其他