js实现报表打印
使用window.print()实现简单打印
通过window.print()方法可直接调用浏览器打印功能，打印当前页面内容。适用于不需要复杂格式调整的场景。
function printPage() {
window.print();
}隐藏非打印元素
使用CSS的@media print规则隐藏页面上不需要打印的部分（如按钮、导航栏）。
@media print {
.no-print {
display: none;
}
}动态生成打印内容
通过JavaScript创建隐藏的打印容器，动态填充数据后打印，避免影响主页面。
function generatePrintContent(data) {
const printDiv = document.createElement('div');
printDiv.innerHTML = `<h1>报表标题</h1><table>${data.map(row =>
`<tr><td>${row.name}</td><td>${row.value}</td></tr>`
).join('')}</table>`;
document.body.appendChild(printDiv);
window.print();
document.body.removeChild(printDiv);
}使用第三方库（如jsPDF）
若需生成PDF格式报表，可使用jsPDF库实现更复杂的排版。
import { jsPDF } from 'jspdf';
function generatePDF(data) {
const doc = new jsPDF();
doc.text('报表标题', 10, 10);
data.forEach((row, index) => {
doc.text(`${row.name}: ${row.value}`, 10, 20 + index * 10);
});
doc.save('report.pdf');
}打印样式优化
通过CSS控制打印时的分页、边距和背景颜色，确保输出效果符合需求。
@media print {
body {
margin: 0;
padding: 1cm;
background-color: white !important;
}
table {
page-break-inside: avoid;
}
}注意事项
- 打印前需确保内容已完全加载，避免数据缺失。
- 测试不同浏览器的兼容性，部分浏览器可能需要手动允许弹窗。
- 复杂表格建议使用
page-break-inside: avoid避免跨页断行。
