打印时details默认收起，因浏览器按加载时DOM状态或HTML源码open属性决定；可靠方案是@media print中用CSS强制details display:block并显式显示非summary内容。
打印时details默认收起？浏览器行为就是如此
HTML details 标签在打印预览或实际输出时，**默认保持当前 DOM 状态**——如果页面加载后用户没点开过，打印出来就是收起的；如果用户手动展开过，打印时通常也会展开（取决于浏览器实现）。但你无法依赖这个“记忆”，因为：Chrome 打印时可能忽略 JS 修改后的 open 状态；Safari 在某些版本中会强制按 HTML 源码里的 open 属性决定打印状态；Firefox 则更倾向尊重当前 el.open 值。所以不能靠“用户点过就自动打开展开内容”来保障打印效果。
强制打印时全部展开的可靠做法
最直接有效的方式是在打印媒体查询中，用 CSS 强制所有 details 处于展开态：
@media print {
details {
/* 移除原生折叠逻辑，让内容始终可见 */
display: block;
}
details > summary {
/* 防止 summary 的默认折叠样式干扰布局 */
display: block;
font-weight: bold;
}
details > *:not(summary) {
/* 确保非 summary 内容不被隐藏 */
display: block !important;
}
/* 关键：覆盖 open 状态判断，强制渲染为展开 */
details:not([open]) > *:not(summary) {
display: block !important;
}
}- 不要只写
details[open] { ... }—— 这对未带open属性的元素无效 - 避免用
height或max-height过渡类样式，打印时这些值常被忽略或重置 - 若内容含图片或 iframe，确保它们在
@media print中未被设为display: none
JS 动态展开再触发打印，慎用
有人尝试在调用 window.print() 前遍历并设 el.open = true，再延时执行打印。这看似合理，但存在明显问题：
- Safari 15.4 之前版本不响应
el.open = true的 JS 赋值，打印仍收起 - Chrome 打印对话框弹出后，DOM 可能已冻结，JS 修改失效
- 用户若在打印预览中手动切换了某个
details，你的 JS 设置会被覆盖 - 多页打印时，只有首屏 DOM 状态被快照，后续页面状态不可控
除非你明确锁定支持范围（如仅内部 Electron 应用），否则纯 CSS 方案更稳。
立即学习“前端免费学习笔记（深入）”；
打印样式里别碰 summary::marker
打印时浏览器通常会隐藏 summary::marker（那个小三角），这是正常行为。如果你在 @media print 中强行设置 summary::marker { content: "▼" }，部分打印机驱动会把它渲染成乱码或方块。更稳妥的做法是：
- 完全不定义
summary::marker在打印样式中 - 如需标题标识，改用
summary::before { content: "【展开内容】"; font-size: 0.9em; color: #666; } - 避免在打印样式中使用背景图、SVG 或
transform，它们在多数打印机上不渲染或错位
真正容易被忽略的是：打印样式表必须放在 <link rel="stylesheet" media="print"> 或 @media print 块内，且不能被其他 CSS 的 !important 覆盖——否则展开逻辑会失效。
