使用了HTML<a>标签中的 download 属性，却出现了意外

这篇文章发布于 2021-04-27 21:03:58

我们都知道HTML5新增了download属性，此属性指示浏览器下载 URL 而不是导航到它，提示用户将其保存为本地文件。以前看到过此属性，一直以来页面中却很少使用到，今天在项目中应用到此属性，却出现了意外...

关于HTML中<a>标签中的download属性，以前有看到过，却未曾使用过，今天项目需求中应用到，却发生了点意外...😨

本地开发我一般喜欢将Chrome浏览器设置支持跨域，在应用到download属性测试没有发现任何BUG，可以下载文件，却没料到发布到服务器上运行时属性竟然无效，同时还提示跨域。图片不会被下载，而是通过浏览器打开，于是，又重新翻了下文档。

HTML<a>标签中的download属性

添加此属性则指示浏览器下载 URL 而不是导航到。

<a download="filename">

点击链接后，就可以将文件保存到本地，如果设置了属性值，如download="xxx",则会以"xxx"名命文件进行下载。但是，如果中间存在"/"或"\"，则会被转换为下划线，如download="xx/x\x"，下载后的文件名将会变更为"xx_x_x"。而且当前地址与下载文件地址需要在同一域名下，否则都会失效，即使服务器端设置了资源共享，也是无济于事。

看看应用download属性需注意项

此属性仅适用于同源 URL。
尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。
如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性。
如果 HTTP 头属性 Content-Disposition 被设置为inline（即 Content-Disposition='inline'），那么 Firefox 优先考虑 HTTP 头 Content-Dispositiondownload 属性。

所以，服务器端设置了资源共享，解除了跨域问题download也是无效的，需同源URL。那么下面看看当前访问域与资源不在一个URL下的处理方法。

在非同源URL情况下执行download下载属性

如，注意事项的第二条就说明，跨域使用blob: URL 或 data: URL。下面示例按blob: URL方式转换文件资源链接。

将图片转换为blob

changeDataType(url) {
    return fetch(url).then((response) => {
      return response.blob();
    }).then(blob => {
      return URL.createObjectURL(blob);
    });
}

异步执行上述方法将其下载

async download(originURL) {
    const a = document.createElement('a');
    a.href = await this.changeDataType(originURL);
    a.download = '';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}