js实现弹出窗口打印
使用 window.print() 方法
在 JavaScript 中，可以通过 window.print() 方法直接调用浏览器的打印功能。该方法会打开打印对话框，用户可以选择打印机或保存为 PDF。
function openPrintDialog() {
window.print();
}打印指定区域内容
如果需要打印页面中的特定区域而非整个页面，可以通过 CSS 控制打印内容的显示与隐藏。
<div id="printableArea">
<!-- 需要打印的内容 -->
<h1>打印标题</h1>
<p>打印内容...</p>
</div>
<button onclick="printDiv('printableArea')">打印</button>
<script>
function printDiv(divId) {
const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>使用 CSS 控制打印样式
通过 @media print 可以定义打印时的特殊样式，隐藏不需要打印的元素。
@media print {
.no-print {
display: none;
}
body {
background-color: white;
color: black;
font-size: 12pt;
}
}打印新窗口内容
如果需要在新窗口中打开内容并打印，可以使用以下方法：
function printNewWindow(content) {
const printWindow = window.open('', '_blank');
printWindow.document.open();
printWindow.document.write(`
<html>
<head>
<title>打印内容</title>
<style>
@media print {
body { margin: 0; padding: 0; }
}
</style>
</head>
<body>
${content}
</body>
</html>
`);
printWindow.document.close();
// 等待内容加载完成后打印
printWindow.onload = function() {
printWindow.print();
// printWindow.close(); // 可选：打印后自动关闭窗口
};
}处理打印事件
可以监听打印事件，在打印前后执行特定操作：
window.addEventListener('beforeprint', () => {
console.log('即将打印');
});
window.addEventListener('afterprint', () => {
console.log('打印完成');
});注意事项
- 某些浏览器可能会阻止弹出窗口，需要用户允许
- 移动设备上的打印行为可能有所不同
- 复杂的页面布局可能需要调整CSS以确保打印效果
- 打印内容中的图片需要确保已完全加载
