如何在打印网页指定区域时保留CSS样式

问题根源 #

1. 新窗口DOM结构不完整，仅写入内容片段导致CSS解析异常
2. 相对路径的CSS文件在空URL的新窗口中可能加载失败
3. 浏览器默认禁用打印背景色，导致红色背景无法显示

方案一：修复新窗口的完整DOM结构并内嵌CSS #

直接在新窗口中写入完整HTML结构，并把需要的CSS内嵌进去，避免路径问题，同时强制开启打印背景色：

button.addEventListener('click', () => {
  const prtContent = document.getElementById("printcard");
  const WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
  
  // 写入完整HTML结构，内嵌目标样式
  WinPrint.document.write(`
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <style>
        .card {
          width: 500px;
          height: 350px;
          background-color: red !important;
          font-size: 1.2em;
          padding: 20px;
          border: 2px solid rgb(8, 8, 8);
        }
        /* 强制浏览器打印背景色 */
        @media print {
          body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
          }
        }
      </style>
    </head>
    <body>
      ${prtContent.outerHTML}
    </body>
    </html>
  `);
  
  WinPrint.document.close();
  WinPrint.focus();
  // 延迟打印确保样式加载完成
  setTimeout(() => {
    WinPrint.print();
    WinPrint.close();
  }, 100);
})

方案二：使用打印媒体查询（更简洁） #

不需要新开窗口，直接通过@media print隐藏不需要打印的元素，强制保留目标区域样式：

步骤1：修改CSS，添加打印样式

/* 原有CSS保持不变，新增以下打印媒体查询 */
@media print {
  /* 隐藏所有不需要打印的元素 */
  ul, .printButton, .card-container {
    display: none !important;
  }
  /* 强制显示打印卡片并开启背景色打印 */
  #printcard {
    display: block !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    /* 调整打印时的位置居中 */
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  /* 重置body样式避免干扰 */
  body {
    align-items: flex-start;
    margin: 0;
    padding: 0;
  }
}

步骤2：简化打印按钮事件

button.addEventListener('click', () => {
  window.print();
})

方案对比 #

• 方案一：适合需要完全独立打印内容的场景，不受原页面样式干扰
• 方案二：代码更简洁，利用浏览器原生打印机制，维护成本更低

内容的提问来源于stack exchange，提问作者denis kiplangat