最可靠方法是右键选“查看页面源代码”后直接保存为HTML文件；fetch仅限同源下载；curl/wget可获取真实服务器响应；跨域时JS无法获取原始HTML源码。
用浏览器直接保存网页源码最可靠
绝大多数情况下，不需要写代码或装工具——右键页面空白处选「查看页面源代码」，再 Ctrl+S（Windows）或 Cmd+S（macOS）就能存为 .html 文件。注意：必须在「查看源代码」的标签页里保存，而不是在原网页标签页里保存，否则可能只保存渲染后的 DOM（含 JS 动态插入内容），而非原始 HTML 源码。
常见错误现象：另存为… 时格式选了 Web Archive 或 Complete，结果得到一堆文件夹和资源，不是单个干净的 .html 文件。应选保存类型为 Web Page, HTML Only（Chrome/Edge）或 Page Source（Firefox）。
用 fetch + Blob 下载当前页原始 HTML（需同源）
如果在自己托管的页面中想加一个「下载本页源码」按钮，且该页面与目标页同源（比如都是 https://example.com/xxx.html），可用 fetch 获取原始响应体：
fetch(window.location.href)
.then(r => r.text())
.then(html => {
const blob = new Blob([html], { type: 'text/html' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'page-source.html';
a.click();
URL.revokeObjectURL(a.href);
});
关键点：
立即学习“前端免费学习笔记（深入）”；
-
fetch不能跨域读取 HTML 源码（会触发 CORS 错误），所以仅适用于同源场景 - 不要用
document.documentElement.outerHTML—— 它返回的是当前 DOM 快照，已丢失注释、doctype、原始换行缩进，且不含未执行的模板或服务端注入内容 - 某些网站启用了
X-Content-Type-Options: nosniff或 CSP，可能阻止fetch成功读取，此时会静默失败
用 curl 或 wget 命令行抓取 HTML 源码（推荐用于非交互页面）
绕过浏览器限制、获取真实服务器返回的原始 HTML，命令行最直接。适合调试服务端渲染、SEO 抓取或批量下载静态页：
Linux/macOS：
curl -o page.html https://example.com
Windows（PowerShell）：
Invoke-WebRequest -Uri "https://example.com" -OutFile "page.html"
注意点：
-
wget默认保存为index.html，可用wget -O page.html https://example.com指定文件名 - 若页面依赖 Cookie 或登录态，需加
-b cookies.txt（curl）或--load-cookies（wget） - 遇到 301/302 重定向，默认不跟随；
curl -L或wget --follow才会跳转后保存最终 HTML
为什么不能用 JavaScript 下载其他网站的 HTML 源码
浏览器出于安全限制，fetch、XMLHttpRequest 对跨域 HTML 资源默认拒绝读取响应体（即使状态码是 200）。你看到的「跨域请求被阻止」控制台报错，通常长这样：
Access to fetch at 'https://other-site.com/' from origin 'https://your-site.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这不是前端能绕过的限制。服务端没配 Access-Control-Allow-Origin，JS 就拿不到原始 HTML 字符串。这时候必须换方案：后端代理转发、命令行工具、或浏览器插件（如「View Source with Syntax Highlighting」类扩展）。
真正容易被忽略的是：所谓「下载 HTML」的目标，到底是「用户看到的结构」还是「服务器发出来的字节流」——这两者在现代 Web 中常常不同。前者用 outerHTML 还凑合，后者必须走网络请求原始响应。
