使用HTML+CSS制作报表时打印PDF与网页显示效果不一致如何解决

核心问题是你没有配置打印专用的媒体查询规则，浏览器打印时会默认调用自带的打印样式，覆盖你写的屏幕端样式，同时Bootstrap的响应式规则在打印场景下会触发小屏适配，导致布局错乱。你直接将下面的样式添加到现有CSS配置中即可：

/* 全局打印纸张设置 */
@page {
  size: A4 portrait; /* 横版打印请改成 A4 landscape */
  margin: 0.5cm; /* 可根据需要调整打印边距 */
}

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-sizing: border-box !important;
  }

  html, body {
    width: 210mm !important; /* 竖版A4宽度，横版请改为297mm */
    height: 297mm !important; /* 竖版A4高度，横版请改为210mm */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 适配自定义page标签打印样式 */
  page {
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto 0.5cm !important;
    box-shadow: none !important; /* 不需要打印阴影可保留，需要则删掉这行 */
  }

  page[size="A4"] {
    width: 100% !important;
    height: 100% !important;
  }

  /* 强制Bootstrap栅格布局和屏幕显示一致，避免响应式缩放错乱 */
  .col-xs-6 { width: 50% !important; float: left !important; }
  .col-xs-5 { width: 41.66666667% !important; float: left !important; }
  .col-md-2 { width: 16.66666667% !important; float: left !important; }
  .col-md-12 { width: 100% !important; float: none !important; }
  .pull-right { float: right !important; }

  /* 禁止内容被分页截断 */
  table, tr, td, img, .container, .row, .border-solid-1 {
    page-break-inside: avoid !important;
  }

  /* 覆盖表格默认打印边框样式 */
  .table-bordered td {
    border: 1px solid #ffffff !important;
  }

  /* 强制字体大小和屏幕显示一致 */
  h6 strong {
    font-size: 17px !important;
  }
  strong {
    font-size: inherit !important;
  }

  /* 图片强制适配容器大小 */
  .img-prod {
    max-width: 100% !important;
    height: auto !important;
  }
}

如果使用横版打印，修改对应注释标注的参数即可，其他自定义样式如果在打印下有异常，直接补充到@media print块内强制覆盖即可。

内容的提问来源于stack exchange，提问作者Thiago Corrêa