如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
如何打印指定的div(无需手动禁用页面上的所有其他内容)?
我想要避免一个新的预览对话框,所以用这个内容创建一个新窗口是没有用的。
该页面包含了几个表格,其中一个包含了我想打印的div -表格是用web的视觉样式设计的,不应该显示在打印中。
当前回答
我的方法-简单的CSS和JS。也适用于React/NextJS。
const handlePrint = e => {
e.preventDefault();
const bodyElement = document.getElementsByTagName('body')[0];
bodyElement.classList.add('printing');
window.print();
bodyElement.classList.remove('printing');
};
.printing {
visibility:hidden;
}
.printView {
visibility:visible;
}
.printing .printView {
/* You can have any CSS here to make the view better on print */
position:absolute;
top:0;
}
它能做什么?
将.printing类添加到body元素。在CSS中,我们用可见性隐藏所有正文内容:hidden; 与此同时,我们用.printing . printview保持CSS的就绪状态,以便为打印区域提供我们想要的任何类型的视图。 触发window.print (); 当用户取消/ prints时,从body元素中删除.printing类。
例子:
<button onclick="handlePrint">
Download PDF
</button>
<div>
<h1>Don't print this</h1>
<div class="printView">Print this</div>
</div>
如果这对任何人有帮助,请告诉我:)
其他回答
我尝试了提供的许多解决方案。没有一个是完美的。它们要么丢失CSS,要么不能在所有浏览器中工作。我找到了一个完美而简单的解决方案,既不丢失CSS,也适用于所有浏览器。
Html
<div class="row" id="print-div">
Your html
</div>
打印稿
let popupWin = window.open('', '_blank', 'width=1080,height=595');
let printContents = document.getElementById("print-div").innerHTML;
let printHead = document.head.innerHTML;
popupWin.document
.write(`<html>
${printHead}
<body onload="window.print();">${printContents}</body></html>`);
popupWin.document.close();
打印特定Div或任何元素的最佳方法
printDiv("myDiv");
function printDiv(id){
var printContents = document.getElementById(id).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
我尝试了提供的许多解决方案。没有一个是完美的。它们要么丢失CSS绑定,要么丢失JavaScript绑定。我找到了一个完美而简单的解决方案,既不会丢失CSS也不会丢失JavaScript绑定。
HTML:
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
Javascript:
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
@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);
});
使用jQuery,它就像这样简单:
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();