页面局部打印需克隆目标元素、创建临时打印窗口注入内容、添加@media print样式重置、延迟执行print()并可选关闭窗口，全程纯DOM操作无需第三方库。
要实现页面局部打印，关键是把目标区域内容提取出来，临时构造一个独立的打印上下文，调用浏览器原生打印功能，再清理临时资源。不需第三方库，纯 DOM 操作即可完成。
1. 选中并克隆目标元素
避免直接操作原 DOM（防止样式错乱或影响页面），先用 cloneNode(true) 深拷贝目标容器：
- 用
document.getElementById或querySelector获取要打印的元素（如<div id="print-section">） - 调用
element.cloneNode(true)复制整个结构（含子节点和事件监听器不会被复制，安全） - 可选：为克隆体添加唯一 class（如
print-only），便于后续注入样式
2. 创建临时打印窗口并注入内容
使用 window.open 打开空白文档，写入 HTML 结构，再将克隆内容插入其中：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 调用
const printWindow = window.open('', '_blank')（注意：部分浏览器可能拦截，建议用户主动触发，如点击按钮） - 用
printWindow.document.write()写入基础 HTML 模板（含<html><head><title>打印</title>） - 在
<body>中插入克隆节点：printWindow.document.body.appendChild(clonedElement) - 立即调用
printWindow.document.close()，确保文档加载完成，否则打印可能为空
3. 注入专用打印样式（关键！）
默认样式往往不适合打印（比如背景色、浮动布局、导航栏会干扰）。需动态添加 @media print 规则：
立即学习“Java免费学习笔记（深入）”；
- 在
printWindow.document.head中创建<style>标签 - 写入常见重置规则，例如：
@media print { * { color: #000 !important; background: transparent !important; text-shadow: none !important; }body { margin: 0; padding: 1cm; font-size: 12pt; }#print-section { page-break-inside: avoid; } - 也可提前定义好
print.css，用link标签引入（需注意跨域限制，推荐内联样式更可靠）
4. 执行打印并自动关闭（可选）
确保内容渲染完成后再打印，避免白页或截断：
- 在
printWindow.document.close()后，用setTimeout延迟调用printWindow.print()（如 200ms），给浏览器一点渲染时间 - 打印后可调用
printWindow.close()关闭窗口（部分浏览器允许，部分会提示“脚本尝试关闭窗口”，不影响功能） - 若需用户确认是否保存为 PDF，不干预——浏览器打印对话框由用户自主控制
