# 使用了HTML标签中的 download 属性，却出现了意外
> 我们都知道HTML5新增了download属性，此属性指示浏览器下载 URL 而不是导航到它，提示用户将其保存为本地文件。以前看到过此属性，一直以来页面中却很少使用到，今天在项目中应用到此属性，却出现了意外...
Author: DeathGhost
Published: 2021-04-27 21:03:58
Category: html
Canonical: https://www.deathghost.cn/article/html/94
Keywords: HTML, HTML5, download, 标签下载, HTML标签属性, 文件下载, 多图下载, 下载图片, download无效, 跨域
关于HTML中标签中的download属性，以前有看到过，却未曾使用过，今天项目需求中应用到，却发生了点意外...😨
本地开发我一般喜欢将Chrome浏览器设置支持跨域，在应用到download属性测试没有发现任何BUG，可以下载文件，却没料到发布到服务器上运行时属性竟然无效，同时还提示跨域。图片不会被下载，而是通过浏览器打开，于是，又重新翻了下文档。
HTML5 标签 download 属性
## HTML标签中的download属性
添加此属性则指示浏览器下载 URL 而不是导航到。
点击链接后，就可以将文件保存到本地，如果设置了属性值，如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);
}
HTML5 标签 download 属性
上面示例代码在TS中的写法，这里不予修改，遇到类似问题的同学可以参考。若下载多个图片，浏览器就会有安全提示“下载多文件”提醒，允许即可。
另外，若图片格式是JPG，下载后会被自动存储为JFIF格式。JFIF是图片存储格式之一，由JPEG格式衍生而来，后缀为".jfif"。如果应用不便，直接修改后缀为.jpg即可。
## Related
- Previous: [延迟加载IFRAME](https://www.deathghost.cn/article/html/80)
- Next: [分享URL地址到微信朋友圈没有缩略图？](https://www.deathghost.cn/article/html/125)