默认打印效果差是因为商品详情页的HTML/CSS面向屏幕渲染，未适配打印的分页流特性；需添加@media print规则隐藏非内容元素、启用背景打印、规范图片表格样式，并在window.print()前清理DOM和注入样式。
直接用 window.print() 会把导航栏、购物车图标、轮播图控制点全打出来，还常出现截断、字体糊、图片错位——这不是浏览器打印功能不行，是详情页没为打印场景做适配。
为什么默认打印效果差？
商品详情页的 HTML/CSS 天然面向屏幕渲染：固定定位吸顶导航、绝对定位弹窗、Flex/Grid 布局依赖视口尺寸、大量背景图和伪元素装饰。这些在打印媒体中要么消失（position: fixed 被忽略），要么错乱（flex-wrap 在分页时无法智能折行），要么根本不可见（background-image 默认不打印）。
关键矛盾在于：屏幕是连续滚动流，打印是离散分页流。没声明 @media print 规则，浏览器就只能硬切，结果就是第一页只打半张主图，第二页开头卡在 SKU 表格中间。
必须加的 @media print 样式规则
在 CSS 文件末尾或 <style></style> 块中追加以下规则，优先级足够覆盖原有样式：
立即学习“前端免费学习笔记（深入）”；
- 隐藏所有非内容区域：
.header, .nav, .footer, .cart-icon, .sku-selector { display: none !important; } - 强制内容区为块级流式布局：
.product-detail-content { position: static !important; width: auto !important; margin: 0 !important; } - 启用背景打印（关键！）：
@page { size: A4; margin: 1cm; } body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } - 图片按实际尺寸缩放适配页面：
img { max-width: 100% !important; height: auto !important; page-break-inside: avoid; } - 表格禁止跨页断裂：
table { page-break-inside: avoid; }
window.print() 触发前该做什么？
不能一上来就调用 window.print()，否则用户看到的是带按钮的“假详情页”。必须先临时清理 DOM 并注入打印专用样式：
- 移除所有交互类名：
document.body.classList.remove('is-mobile', 'has-sidebar'); - 克隆并精简内容容器：
const printContent = document.querySelector('.product-main').cloneNode(true);，然后只保留<h1></h1>、<p></p>、<img alt="HTML商品详情页如何打印？打印格式优化指南" >、<table> 等语义化标签，删掉 <code><button></button>、<input>、<div class="swiper"> <li>插入临时样式节点：<code>const style = document.createElement('style'); style.textContent = '@media print {...}'; document.head.appendChild(style); - 最后调用：
window.print(); document.head.removeChild(style); - iPhone 上
background-image即使加了print-color-adjust也大概率不显示——改用<img alt="HTML商品详情页如何打印？打印格式优化指南" >标签内嵌主图 - 华为/小米部分机型不支持
@page的margin设置，需用padding替代，并给body加padding: 1cm; - 所有安卓 WebView 都不支持
page-break-inside: avoid，表格跨页问题只能靠 JS 预计算高度，在超长表格前手动插入<div style="page-break-before: always;"></div>
移动端打印的兼容性坑
iOS Safari 和安卓 Chrome 对 @media print 支持极弱，很多规则直接被忽略。真实测试发现：
最稳妥的做法：别指望移动端原生打印能出专业效果。如果业务强依赖打印（比如线下门店扫码下单后现场出单），直接用 wkhtmltopdf 服务端生成 PDF 更可靠——它用 WebKit 内核渲染，@media print 全支持，还能嵌入字体、加水印、控制页眉页脚。
