最稳解法是用@media print配合display: none隐藏非目标区域，再通过JavaScript控制“隐藏→打印→还原”流程，确保目标区域独立、样式自包含且不干扰布局。
直接用 BOM 的 window.print() 无法指定打印区域，必须配合 HTML/CSS 控制——核心思路是：临时隐藏非目标内容，再触发打印，最后恢复页面状态。
准备可打印的指定区域
给要打印的内容包裹一个有明确标识的容器（比如 id="print-section"），确保它结构独立、样式自包含。避免使用绝对定位或浮动干扰布局，否则打印预览可能错乱。
- 推荐用语义化标签如
<article id="print-section">或<div class="print-area"> - 该区域内的图片、表格、字体等应尽量使用内联样式或已加载的 CSS，避免打印时因资源未加载而空白
- 避免在该区域内使用
display: none或visibility: hidden的元素，它们会直接消失，无法打印
用 CSS 媒体查询隔离打印样式
在页面中加入 @media print 规则，隐藏其他部分，只显示目标区域：
<style>
/* 默认隐藏所有，只让打印区可见 */
body * { display: none; }
#print-section, #print-section * { display: block; }
/* 可选：重置边距、分页等 */
@media print {
body { margin: 0; padding: 0; }
#print-section { page-break-inside: avoid; }
}
</style>注意：display: none 在打印媒体中生效，但不能写在外部 CSS 文件里（除非明确用 media="print" 加载），否则可能被浏览器忽略。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
JavaScript 控制打印流程
封装一个函数，完成「隐藏→打印→还原」三步操作：
function printSection(id) {
const section = document.getElementById(id);
if (!section) return;
<p>// 保存原始 display 状态（仅针对 body 下直系子元素，简化处理）
const bodyChildren = Array.from(document.body.children);
const originalDisplays = bodyChildren.map(el => el.style.display);</p><p>// 隐藏全部，只显示目标区域
bodyChildren.forEach(el => {
el.style.display = 'none';
});
section.style.display = 'block';</p><p>// 强制重排，确保样式生效（尤其在 Chrome 中必要）
void document.body.offsetHeight;</p><p>// 打印
window.print();</p><p>// 恢复原状（延迟执行，避免打印对话框关闭前被覆盖）
setTimeout(() => {
bodyChildren.forEach((el, i) => {
el.style.display = originalDisplays[i] || '';
});
}, 100);
}调用方式：printSection('print-section');
增强兼容性与体验的小技巧
不同浏览器对打印样式支持略有差异，以下建议可减少意外：
- 打印前滚动到目标区域顶部：
section.scrollIntoView({ behavior: 'instant' }); - 若页面用了框架（如 Vue/React），需确保目标 DOM 已渲染完成再调用，可用
nextTick或requestAnimationFrame - 移动端 Safari 对
window.print()支持有限，可提示用户“请使用分享菜单→打印”作为备选 - 避免在打印过程中修改 URL 或跳转，否则可能中断打印流程
不复杂但容易忽略：关键不在 JS 多炫酷，而在 CSS 媒体规则是否精准生效、DOM 状态是否干净还原。
