如何使用window.print()打印与屏幕显示效果完全一致的页面

问题原因 #

浏览器打印时默认会切换到打印媒体样式规则，Bootstrap自带的打印适配会修改默认布局、隐藏背景阴影等装饰样式，输入框、表格的边框也会被浏览器默认打印规则重置，加上没有做专门的打印样式适配，才会出现打印预览和页面实际显示效果不一致的问题。

可行解决方案 #

1. 新增打印专属媒体查询样式，强制保留页面显示效果

在页面<head>标签中添加如下样式，覆盖浏览器和Bootstrap的默认打印规则：

<style>
@media print {
  /* 强制保留背景色、边框色等彩色样式 */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-sizing: border-box !important;
  }
  /* 配置打印纸张为A4纵向，边距20px */
  @page {
    size: A4 portrait;
    margin: 20px;
  }
  /* 表单容器适配打印宽度，去掉不需要的阴影 */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  /* 保留输入框的边框、对齐、宽度样式 */
  input.text {
    border: 1px solid #ced4da !important;
    text-align: center !important;
    outline: none !important;
  }
  /* 强制保留表格边框样式，避免打印时边框消失 */
  .table {
    border-collapse: collapse !important;
    width: 100% !important;
  }
  .table th, .table td {
    border: 1px solid #dee2e6 !important;
  }
  /* 保留下方小表格的字体大小 */
  #table {
    font-size: 10px !important;
  }
  #table tr:nth-child(2) {
    font-size: 8px !important;
  }
  /* 隐藏不需要打印的页面元素（如果有的话） */
  /* .no-print { display: none !important; } */
}
</style>

2. 调整打印触发逻辑，避免资源未加载完成就打印

原有代码直接在页面加载时执行window.print()，可能出现样式、图片未加载完成就触发打印的问题，修改JS逻辑如下：

<script type="text/javascript">
window.onload = function() {
  // 延迟300ms确保所有静态资源加载完成，可根据实际情况调整时长
  setTimeout(() => {
    window.print()
  }, 300)
}
</script>

额外注意事项

• 你本地引入的Registrationform.css中的自定义样式，如果需要在打印时生效，也可以移动到上述打印媒体查询块中，或者添加!important优先级标识。
• 顶部校徽的本地路径images\NSTU-logo.png要确保路径正确，否则打印时会出现图片缺失的问题。
• 如果打印时还是出现内容分页断裂的问题，可以给需要保留在同一页的元素添加page-break-inside: avoid;样式。

内容的提问来源于stack exchange，提问作者Khair Ahammed