解决方案：

1. CSS控制打印样式（推荐主流浏览器）
   在页面添加以下样式，通过@page规则将页边距设为0，彻底去除默认页眉页脚：

   @media print {
         
         
     @page {
         
          margin: 0; }  /* 去除页眉页脚空间 */
     body {
         
          margin: 1cm; }  /* 设置内容边距 */
     .no-print {
         
          display: none; }  /* 隐藏非打印元素 */
   }
   

   此方法兼容Chrome/Firefox等现代浏览器，IE浏览器需手动设置打印选项。

2. 动态样式注入（增强兼容性）
   通过JavaScript在打印前动态插入样式，确保兼容性：

   function printWithoutHeaders() {
         
         
     const style = document.createElement('style');
     style.innerHTML = `
       @page { margin: 0; }
       body { margin: 1cm; }
     `;
     document.head.appendChild(style);
     window.print();
     style.remove();  // 打印后移除样式
   }
   

   此方法可覆盖部分浏览器默认打印设置。

3. 特殊场景处理
   • 保留页码：通过counter(page)自定义页脚内容
   • IE浏览器：建议提示用户手动取消勾选“页眉和页脚”选项
   • 复杂布局：使用page-break-before控制分页位置

---

效果对比：
| 未优化打印 | 优化后打印 |

注意事项：
• 不同浏览器打印预览效果可能略有差异，建议提前测试
• 打印区域超出页面时，需通过CSS控制分页
• 涉及敏感信息时，可结合@media print隐藏敏感元素