download属性仅对同源链接生效，跨域、file://协议、safari全系及锚点href均导致失效；安全跨域下载须用fetch+blob+createobjecturl方案。

download 属性在现代浏览器中基本可用，但只对同源 @#@#@#@#@#@#@#@#@#@0：点击只滚动，download 形同虚设

<a href="/report.pdf#page=2" download></a>：PDF 文件本身可下载，但 #page=2 是 PDF 查看器解析的，不影响下载行为

想“滚动+下载”两个动作？必须拆成两步：先 JS 滚动，再单独触发下载逻辑（如上 fetch 方案）

真正容易被忽略的是：服务端 Content-Disposition: attachment 响应头比前端 download 属性更可靠，尤其对 Safari 和跨域场景——它不依赖浏览器 JS 支持，也不受同源策略限制，只要响应头存在且正确，点击链接就下载。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

fetch('/api/export?format=csv')
  .then(res => {
    const filename = res.headers.get('content-disposition')?.match(/filename[^;=\n]*=(?:'[^']*'|"([^"]*)"|[^;\n]*)/)?.[1] || 'export.csv';
    return res.blob().then(blob => ({ blob, filename }));
  })
  .then(({ blob, filename }) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  });

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！