js实现打印
使用window.print()方法
在JavaScript中，可以通过调用window.print()方法直接触发浏览器的打印功能。该方法会打开系统的打印对话框，用户可以选择打印机和设置打印选项。
function printPage() {
window.print();
}打印特定区域
若需打印页面中的特定部分而非整个页面，可以通过CSS的@media print规则隐藏非目标内容。例如，为需要打印的区域添加特定ID，并在打印时隐藏其他元素。
<div id="printableArea">
<!-- 需要打印的内容 -->
</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 {
font-size: 12pt;
background: white;
}
}打印PDF或其他格式
若需生成PDF或其他格式的打印输出，可以使用第三方库如jsPDF或html2pdf。这些库允许将HTML内容转换为PDF并触发打印。
// 使用html2pdf.js示例
import html2pdf from 'html2pdf.js';
function generatePDF() {
const element = document.getElementById('content-to-print');
html2pdf().from(element).save();
}打印事件监听
可以通过window.onbeforeprint和window.onafterprint监听打印事件，在打印前后执行特定操作。
window.onbeforeprint = function() {
console.log('打印即将开始');
};
window.onafterprint = function() {
console.log('打印已完成');
};注意事项
- 动态修改DOM后恢复原始内容时需谨慎，避免事件监听器丢失。
- 部分浏览器可能限制
window.print()的自动调用，需用户手势触发（如点击事件）。 - 打印样式需测试不同浏览器的兼容性，尤其是边距和分页控制。
