js实现局部打印
局部打印的实现方法
在JavaScript中实现局部打印可以通过以下方法完成，主要利用CSS和JavaScript控制打印范围。
使用CSS隐藏非打印部分
通过CSS的@media print规则隐藏不需要打印的元素，仅显示目标区域。
@media print {
body * {
visibility: hidden;
}
.print-area, .print-area * {
visibility: visible;
}
.print-area {
position: absolute;
left: 0;
top: 0;
}
}通过JavaScript触发打印
调用window.print()方法触发浏览器打印对话框，结合CSS实现局部打印。
function printPartial() {
window.print();
}动态创建打印内容
克隆目标DOM节点并放入隐藏的打印容器，避免影响原页面布局。
function printElement(element) {
const printWindow = window.open('', '_blank');
printWindow.document.write('<html><head><title>Print</title></head><body>');
printWindow.document.write(element.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}使用iframe打印
将目标内容插入iframe后打印，适合复杂布局。
function printWithIframe(element) {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
const doc = iframe.contentWindow.document;
doc.write('<html><head><title>Print</title></head><body>');
doc.write(element.innerHTML);
doc.write('</body></html>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
setTimeout(() => document.body.removeChild(iframe), 1000);
}注意事项
- 打印样式可能需要单独调整，例如隐藏按钮、调整边距等。
- 部分浏览器会默认打印背景色，需在打印设置中手动开启。
- 动态内容需确保在打印前已完全加载。
以上方法可根据实际需求选择，CSS方案适合简单场景，iframe方案兼容性更好。
