js实现打印页面
使用 window.print() 方法打印页面
window.print() 是浏览器内置的打印功能，调用后会弹出打印对话框，用户可以选择打印机或保存为 PDF。
function printPage() {
window.print();
}自定义打印样式
通过 CSS 的 @media print 可以定义打印时的样式，隐藏不需要打印的元素或调整布局。
@media print {
.no-print {
display: none;
}
body {
font-size: 12pt;
background: white;
}
}打印特定区域
如果需要只打印页面的一部分，可以创建一个包含目标内容的临时窗口或 iframe。
function printElement(elementId) {
const element = document.getElementById(elementId);
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();
}打印按钮示例
在 HTML 中添加一个打印按钮，点击时触发打印功能。
<button onclick="window.print()">Print Page</button>打印前和打印后事件
通过 window.onbeforeprint 和 window.onafterprint 可以监听打印事件，执行特定操作。
window.onbeforeprint = function() {
console.log('Printing will start');
};
window.onafterprint = function() {
console.log('Printing completed');
};打印预览控制
某些浏览器支持打印预览，但无法直接通过 JavaScript 控制，用户需要手动操作。
function showPrintPreview() {
window.print();
}打印设置选项
通过 CSS 可以控制打印的分页、边距等设置。
@media print {
@page {
size: A4;
margin: 1cm;
}
h1 {
page-break-before: always;
}
p {
page-break-inside: avoid;
}
}注意事项
- 打印功能依赖于浏览器实现，不同浏览器可能有差异。
- 某些浏览器可能会阻止弹出窗口，需要用户允许。
- 打印样式可能需要多次调试以达到最佳效果。
以上方法可以灵活组合，根据具体需求实现不同的打印功能。
