如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
当前回答
试试这个:
function printElement($elem){
var $customPrintSection = document.getElementById('customPrintSection'),
$customPrintSectionCss = document.getElementById('customPrintSectionCss');
if ($customPrintSection){
$customPrintSection.remove();
}
if ($customPrintSectionCss){
$customPrintSectionCss.remove();
}
$customPrintSection = document.createElement('div');
$customPrintSection.id = 'customPrintSection';
$customPrintSectionCss = document.createElement('style');
$customPrintSectionCss.id = 'customPrintSectionCss';
document.body.appendChild($customPrintSection);
document.body.appendChild($customPrintSectionCss);
$customPrintSection.innerHTML = $elem.innerHTML;
$customPrintSectionCss.innerHTML = '@media screen { div#customPrintSection { display: none; } } @media print { body *:not(div#customPrintSection):not(div#customPrintSection *) { display: none; } div#customPrintSection a[href]:after { content: none !important; } }';
window.print();
$customPrintSection.remove();
$customPrintSectionCss.remove();
}
我喜欢这个解决方案,因为它不像css解决方案那样影响整个页面,它在一个特定的答案中使所有主体元素立即不可见。所以如果需要的话,祝你能打印整页。
我也更喜欢“display: none”方法而不是“visibility: hidden”方法,所以没有必要将可打印元素设置为绝对元素并将其对齐到左上角。但我想这是主观的。
最后,它真的打败了新的窗口方法。
其他回答
printDiv()函数出现了几次,但在这种情况下,将丢失所有绑定元素和输入值。所以,我的解决方案是为所有名为“body_allin”的东西创建一个div,并在第一个名为“body_print”的外部创建另一个div。
然后调用这个函数:
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("body_print").innerHTML = printContents;
document.getElementById("body_allin").style.display = "none";
document.getElementById("body_print").style.display = "";
window.print();
document.getElementById("body_print").innerHTML = "";
document.getElementById("body_allin").style.display = "";
document.getElementById("body_print").style.display = "none";
}
如果你只想打印这个div,你必须使用指令:
@media print{
*{display:none;}
#mydiv{display:block;}
}
在我的例子中,我必须在页面中打印图像。当我使用投票的解决方案时,我有一个空白页面,另一个显示图像。希望它能帮助到一些人。
下面是我使用的css:
@media print {
body * {
visibility: hidden;
}
#not-print * {
display: none;
}
#to-print, #to-print * {
visibility: visible;
}
#to-print {
display: block !important;
position: absolute;
left: 0;
top: 0;
width: auto;
height: 99%;
}
}
我的html是:
<div id="not-print" >
<header class="row wrapper page-heading">
</header>
<div class="wrapper wrapper-content">
<%= image_tag @qrcode.image_url, size: "250x250" , alt: "#{@qrcode.name}" %>
</div>
</div>
<div id="to-print" style="display: none;">
<%= image_tag @qrcode.image_url, size: "300x300" , alt: "#{@qrcode.name}" %>
</div>
适合空间空高度的最佳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;
}
}
@Kevin佛罗里达 如果你有同一个类的多个div,你可以这样使用它:
<div style="display:none">
<div id="modal-2" class="printableArea">
<input type="button" class="printdiv-btn" value="print a div!" />
</div>
</div>
我使用的是Colorbox内内容类型
$(document).on('click', '.printdiv-btn', function(e) {
e.preventDefault();
var $this = $(this);
var originalContent = $('body').html();
var printArea = $this.parents('.printableArea').html();
$('body').html(printArea);
window.print();
$('body').html(originalContent);
});