最直接有效的方法是打开DevTools→⋮→More tools→Rendering→勾选Emulate CSS media: print，页面即时呈现打印样式效果，支持实时调试@media print规则，无需触发真实打印流程。
Chrome DevTools 里怎么开打印预览
最直接有效的办法是用 chrome 自带的渲染模拟功能，不用反复点「打印」弹窗、输打印机名、调页边距——那纯属浪费时间。
打开 DevTools（F12 或 Ctrl+Shift+I），点右上角 ⋮ → More tools → Rendering，在面板底部勾选 Emulate CSS media: print。页面立刻变成打印样式下的渲染效果，所有 @media print 规则即时生效，改完 CSS 刷新即见结果。
- 这个模拟不触发真实打印流程，也不依赖
window.print()，纯粹是 CSS 媒体查询的实时反馈 - 它不会模拟分页断行、页眉页脚、或浏览器默认打印缩放行为，但对布局隐藏/显示、字体重置、边框补全等 90% 的样式调试已足够
- Safari 和 Firefox 也有类似功能（Safari 开发菜单 → 「显示 Web 检查器」→ 「渲染模式」；Firefox 开发者工具 → 「设置」→ 「首选项」→ 勾选「启用打印媒体模拟」），但 Chrome 的响应速度和稳定性目前最好
为什么写了 @media print 还没效果
常见原因是样式被更高优先级规则覆盖，或者压根没命中目标元素——尤其当你用 Bootstrap 时，它的工具类和组件样式层级很深。
比如你写了：
@media print {
.header { display: none !important; }
}
但页面里实际是 <header class="navbar navbar-expand-lg">，那 .header 根本不匹配；又或者 Bootstrap 的 .navbar 自带 display: flex，而你的规则没加 !important 或没写够 specificity，就会失效。
- 务必用 DevTools 的「Computed」面板检查目标元素最终生效的
display值，看是不是真被设成了none - Bootstrap 5.3 起支持
d-print-none这类原生打印工具类，比手写@media print更稳：直接加class="d-print-none"到导航栏容器上即可 - 避免用
visibility: hidden或opacity: 0隐藏内容——它们不改变文档流，部分浏览器仍会把内容印出来
表格边框在打印里为啥是虚的或没了
因为浏览器打印时默认忽略大部分背景色和部分边框样式，尤其是 Bootstrap 的 .table-bordered 依赖的 border-color: var(--bs-border-color) 在 print 媒体下可能降级为透明或浅灰。
最保险的做法是显式重置边框颜色和粗细：
@media print {
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #000 !important;
}
}
- 这段 CSS 必须放在 Bootstrap 自带 CSS 之后引入，否则会被覆盖
- 不要只写
.table-bordered td——Bootstrap 5 对子选择器更严格，漏掉thead/tbody层级会导致部分单元格无边框 - 如果用了
bootstrap-table插件，它的打印逻辑会克隆 DOM 到 iframe，此时需确保该 CSS 也被注入到 iframe 文档中，或直接用插件的data-print-styles参数传入
用 window.print() 时哪些东西容易“多打出来”
按钮、分页控件、侧边栏、顶部导航、甚至控制台里临时加的调试 div —— 只要它们在当前 DOM 树里，且没被 print 媒体规则明确隐藏，就很可能进打印页。
- 别依赖「用户不会点这里」，而是用
class="no-print"+ 全局@media print { .no-print { display: none !important; } }主动隔离 - 慎用
position: fixed元素（比如悬浮返回顶部按钮）：旧版 Edge 和部分 PDF 转换工具会在每一页顶部重复渲染它 - Flex/Grid 布局在跨页时行为不一致：Firefox 可能整块截断、Safari 可能留大片空白，打印关键内容建议退回
block+margin控制 - 业务上真需要确认“是否已打印”，只能靠 UI 状态标记（如按钮变灰 + 提示“已发送至打印机”），
window.print()是同步调用但不返回成功与否，也无法监听物理打印机完成事件
打印样式不是加个 @media print 就完事，它是一次针对输出媒介的重新设计：去掉交互、强化可读、控制分页、适配物理纸张。很多坑不在代码里，在你没意识到浏览器根本没按你想的那样渲染。
