如何打印选定的div而不是完整页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何打印选定的div而不是完整页面相关的知识，希望对你有一定的参考价值。
我有两个div：div1和div2。
维护应用于正在打印的div2元素的原始css样式。
我不想在div1内打印内容，只在div2内打印。
怎么打印？
答案
试试这个
<style type="text/css">
@media print
{
body * { visibility: hidden; }
.div2 * { visibility: visible; }
.div2 { position: absolute; top: 40px; left: 30px; }
}
</style>
另一答案
<script type="text/javascript">
function printDiv() {
var printContents = document.getElementById('Your printable div').innerhtml;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
另一答案
使用我的以下解决方案，如果您不想打印整页，可以从网页打印特定的div内容。
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'new 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.print();
mywindow.close();
return true;
}
</script>
</head>
<body>
<div id="yourdiv">
Div you want to print. 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" onclick="PrintElem('#yourdiv')" />
</body>
</html>
另一答案
<script type="text/javascript">
function printDiv() {
var printContents = document.getElementById('Your printable div').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
另一答案
您只能打印整页，而不能打印一页。因此，有两个选项，您可以将一个元素的内容复制到一个新页面并打印它，或者阻止打印另一个元素。
您可以使用媒体css隐藏打印中的一个元素。例：
@media print {
.div1 { display: none; }
}
另一答案
看看jQuery的jqPrint插件：http://plugins.jquery.com/project/jqPrint
另一答案
简单的方法
@media print {
body > div { display:none; }
body .div { display:block; }
}
另一答案
你也可以使用jQuery来做到这一点：
<script>
function printArea(){
$('body').css('visibility', 'hidden');
$('.div2').css('visibility', 'visible');
window.print();
}
</script>
另一答案
.class-toggle { display: inline-block; }
#div1, #div2 { display: none; }
function classToggle() {
$('#div1').addClass('class-toggle');
}
classToggle();
然后，您可以使用事件处理程序来处理打印输出的方式和时间。
另一答案
使用PrintArea jQuery插件打印特定的div内容。我从这里找到了简单的集成指南 - How to print a specific area of the web page using jQuery
您只需要以下代码即可使用PrintArea jQuery插件。
<script>
$(document).ready(function(){
$("#printButton").click(function(){
var mode = 'iframe';
var close = mode == "popup";
var options = { mode : mode, popClose : close};
$("div.printableArea").printArea( options );
});
});
</script>
以上是关于如何打印选定的div而不是完整页面的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Chrome 或 Firefox 中打印特定的 HTML 元素而不是整个页面？