HTML怎么在映射区域增加下载链接-html教程-PHP中文网

area标签不支持download属性，必须改用JavaScript拦截点击并fetch+Blob下载，或由服务端配置Content-Disposition响应头。

html怎么在映射区域增加下载链接

area标签不支持download属性，必须换方案

直接给 <area> 标签加 download 属性完全无效——浏览器会忽略它，点击后仍按默认行为跳转或打开资源。这是因为 HTML 规范明确限定 download 只对 <a></a> 元素生效，<area> 不在支持范围内。

常见错误现象：写了 <area href="report.html" download="报告">，结果点击后在当前页打开了 HTML 文件，甚至触发 XSS 风险（如果 href 是用户可控内容）。

可行解法只有两个方向：

把图像映射区域“升级”为可操作的 <a></a> + CSS 定位覆盖（适合固定尺寸、简单热区）
用 JavaScript 拦截 click 事件，手动触发下载逻辑（推荐，兼容所有热区形状和跨域场景）

用 JavaScript 拦截 area 点击并触发 Blob 下载

这是目前唯一能真正绕过同源限制、支持任意 URL（包括 CDN 上的 HTML 文件）且不依赖服务端配置的方案。

关键点：

必须在 <area> 的 onclick 或事件监听器中调用 fetch，不能只靠 href
fetch 要带 { mode: 'cors' }，否则跨域请求直接失败
后端必须返回 Access-Control-Allow-Origin 响应头，否则 fetch 报 TypeError: Failed to fetch
大文件慎用，blob() 会暂存全部内容到内存，可能卡顿或 OOM

示例代码（绑定到某个 <area id="dl-area">）：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

document.getElementById('dl-area').addEventListener('click', async (e) => {
  e.preventDefault();
  const url = 'https://cdn.example.com/page.html';
  try {
    const res = await fetch(url, { mode: 'cors' });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const blob = await res.blob();
    const blobUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = '页面快照.html';
    a.click();
    URL.revokeObjectURL(blobUrl);
  } catch (err) {
    console.error('下载失败:', err.message);
  }
});

服务端配 Content-Disposition 是最稳的替代路径

如果你能控制 HTML 文件的响应头（比如该文件由你自己的 Nginx / Express 提供），那就别折腾前端了——直接让服务端告诉浏览器“这是附件”。

这样哪怕用户是通过 <area> 跳转过去，也能强制弹出保存框：

Nginx 配置：add_header Content-Disposition "attachment; filename=page.html";
Express 示例：res.setHeader('Content-Disposition', 'attachment; filename="page.html"');
注意中文文件名要写成 filename*=UTF-8''页面快照.html，否则可能乱码或截断

这个方案不依赖前端任何 JS，也不受同源策略影响，但前提是：你得有服务器权限，且该 HTML 文件不能是纯静态托管（如 GitHub Pages 默认不支持自定义响应头）。