点击链接直接下载 index.html 不触发浏览器打开？
默认情况下，浏览器遇到 .html 文件会直接渲染，而不是弹出下载。想让它“下载”而非“打开”，关键不是改后缀或加 MIME 类型，而是服务端响应头必须明确告诉浏览器：Content-Disposition: attachment。
常见错误现象：点链接后页面刷新/跳转到新页，或控制台报 net::ERR_ABORTED；本地双击 file:// 协议下的 HTML 根本不生效——因为 file:// 协议不支持设置响应头。
- 只有通过 HTTP(S) 服务（如
python -m http.server、Nginx、Express）才能生效 - 不能靠前端 JS 的
location.href或window.open实现真正下载 -
<a href="xxx.html" download></a>对跨域资源无效，且 Chrome 对同域.html也常忽略download属性（出于安全限制）
Node.js / Express 中强制下载 report.html
服务端需显式设置响应头，并以流方式发送文件内容。不能用 res.sendFile() 默认行为（它会设 text/html 类型并渲染）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
res.setHeader('Content-Type', 'application/octet-stream')避免浏览器识别为 HTML - 必须加
res.setHeader('Content-Disposition', 'attachment; filename="report.html"') - 用
fs.createReadStream()管道输出，别用res.send()，否则可能因字符编码问题损坏文件
app.get('/download', (req, res) => {
const filePath = path.join(__dirname, 'report.html');
res.setHeader('Content-Type', 'application/octet-stream');
res.setHeader('Content-Disposition', 'attachment; filename="report.html"');
fs.createReadStream(filePath).pipe(res);
});
Nginx 配置让 /static/*.html 强制下载
如果 HTML 是静态资源，不想改后端代码，Nginx 可统一拦截并重写响应头。注意：它只对匹配路径生效，不改变实际文件内容。
容易踩的坑：
- 没加
add_header Content-Disposition "attachment";，只改Content-Type不够 - 配置写在
location /下但被更具体的location ~ \.html$覆盖，导致失效 - 忘记加
override机制——Nginx 默认会把text/html写死，得用add_header+always强制覆盖
location ~ ^/static/.*\.html$ {
add_header Content-Disposition "attachment" always;
add_header Content-Type "application/octet-stream" always;
try_files $uri =404;
}
前端 JS 触发下载但保留原始 HTML 结构？
如果 HTML 是动态生成的（比如报表预览页），又想让用户“保存当前页为 HTML”，就得用 JS 把 DOM 序列化成字符串再构造 Blob。这不是真下载服务器文件，而是生成一份快照。
注意事项：
-
document.documentElement.outerHTML比document.body.innerHTML更完整（含） - 记得替换相对路径（如
src="img/logo.png"）为绝对 URL，否则离线打开时资源 404 - IE 不支持
Blob+URL.createObjectURL，如需兼容得降级用msSaveBlob
const htmlStr = document.documentElement.outerHTML;
const blob = new Blob([htmlStr], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'page-snapshot.html';
a.click();
URL.revokeObjectURL(url);
最易被忽略的一点：所有方案都依赖「用户主动触发」（比如点击按钮）。自动下载（如 onload 后立刻下）会被现代浏览器拦截，且无法绕过。别试图用 iframe 或定时器 hack，它要么失败，要么被当恶意行为封掉。
