js实现局部打印
使用window.print()实现局部打印
在JavaScript中，可以通过window.print()方法触发浏览器的打印功能。要实现局部打印，需要隐藏不需要打印的内容，只显示目标区域。
function printDiv(divId) {
const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}使用CSS媒体查询控制打印样式
通过CSS的@media print可以定义打印时的样式，隐藏不需要打印的元素。
@media print {
body * {
visibility: hidden;
}
#print-area, #print-area * {
visibility: visible;
}
#print-area {
position: absolute;
left: 0;
top: 0;
}
}创建iframe实现打印
另一种方法是创建一个iframe，将要打印的内容放入iframe中，然后调用iframe的打印功能。
function printDiv(divId) {
const printContent = document.getElementById(divId).innerHTML;
const frame = document.createElement('iframe');
frame.style.display = 'none';
document.body.appendChild(frame);
const frameDoc = frame.contentWindow || frame.contentDocument;
if (frameDoc.document) frameDoc = frameDoc.document;
frameDoc.document.open();
frameDoc.document.write('<html><head><title>打印</title></head><body>');
frameDoc.document.write(printContent);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(() => {
frame.contentWindow.focus();
frame.contentWindow.print();
document.body.removeChild(frame);
}, 500);
}使用打印样式表
可以创建一个专门的打印样式表，在打印时只显示需要的内容。
<link rel="stylesheet" type="text/css" media="print" href="print.css">在print.css中定义哪些元素需要显示或隐藏。
注意事项
恢复页面内容时要注意事件监听器可能会丢失，使用innerHTML会破坏原有DOM元素的事件绑定。
对于复杂的打印需求，建议使用专门的打印库如Print.js，它提供了更丰富的打印功能和对PDF的支持。
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css">
