复用页面布局需先明确目标：存档快照、还原源码或提取结构，不同目的对应不同方法；常用document.documentElement.outerHTML获取渲染后DOM，但不含外部CSS/JS逻辑；固化样式需用getComputedStyle转内联；表格复制须脚本解析行列结构；最终能否运行取决于是否配套JS、路由与API。
直接复制页面布局不是“拷贝粘贴”就能解决的事——HTML模板本身不包含运行时样式计算结果，也不保留JS动态插入的DOM节点。真想复用布局，得明确目标：是存档静态快照？还原可编辑源码？还是提取结构供二次开发？不同目的对应完全不同的操作路径。
用 document.documentElement.outerHTML 复制渲染后完整DOM
这是最常用也最容易出错的方式。它拿到的是浏览器解析并执行JS后的真实DOM树，适合调试或保存当前状态快照。
- 打开开发者工具（
Ctrl+Shift+I），切到Elements标签页，Ctrl+A全选再Ctrl+C—— 这是最稳妥的； - 如果页面禁用了右键或选择，可在地址栏粘贴执行：
javascript:(function(){copy(document.documentElement.outerHTML);alert('HTML已复制');})();； - 注意：这个结果里所有内联样式、动态添加的class、JS生成的内容都包含在内，但外部CSS文件路径和JS逻辑本身不会被嵌入；
- 常见坑：
outerHTML不包含<head>中的<script>执行痕迹，比如 Vue/React 的根挂载点可能只是个空<div id="app"></div>，复制出来无法直接运行。
用 getComputedStyle + 脚本批量转内联样式
当你要把一个已有页面“固化”成单HTML文件（含样式），且不依赖外部CSS时，必须把计算后的样式塞进每个元素的 style 属性里。
- 控制台执行脚本前，先确认目标区域，比如只处理
body或某个容器：let select = '#main-content'； - 核心逻辑是遍历所有子元素，对每个调用
window.getComputedStyle(el)，再用el.style.setProperty()或 jQuery 的.css()写回； - 不是所有CSS属性都能可靠取到值（比如
background-image在跨域资源下返回none），建议优先保留color、font-size、margin、padding、display等基础属性； - 执行后用
$('body').clone().wrap('<div>').parent().html() 提取字符串，再 <code>copy()—— 这样能避免 jQuery 对象直接 toString 的问题。复制表格结构时别信浏览器默认行为
直接拖选表格再
Ctrl+C粘贴到 Excel，90% 情况下列会错位。因为浏览器只按视觉顺序提取文本，不管rowspan、colspan或隐藏单元格。立即学习“前端免费学习笔记（深入）”；
- 正确做法是写脚本遍历
<table>，按行列索引重建二维数组，再拼成 TSV 字符串； - 关键点：用
cellIndex和rowIndex获取原始位置，用hasAttribute('rowspan')判断是否需向下占位； - 写入剪贴板推荐用现代 API：
navigator.clipboard.writeText(tsvString)，但必须由用户点击触发，且页面需 HTTPS； - 降级方案是创建隐藏
<textarea>，设value后select()+document.execCommand('copy')，兼容性好但已被部分浏览器标记为废弃。
真正难的从来不是“怎么复制”，而是复制之后要不要维护、能不能跑起来。一个带 React 的页面，你复制了 HTML 和内联样式，没打包 JS、没配路由、没连 API，它就只是张不能动的皮。动手前先问自己：这个“布局”是要当参考、当原型、还是当生产代码？目标不清，复制得再全也是白忙。
- 正确做法是写脚本遍历
