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

这篇文章发布于

DeathGhost 编辑, 归类于html » 当前评论0条。

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

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

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

HTML5 <a> 标签 download 属性
HTML5 <a> 标签 download 属性

HTML<a>标签中的download属性

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

<a download="filename">

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

看看应用download属性需注意项

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

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

如,注意事项的第二条就说明,跨域使用blob: URLdata: 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 <a> 标签 download 属性
HTML5 <a> 标签 download 属性

上面示例代码在TS中的写法,这里不予修改,遇到类似问题的同学可以参考。若下载多个图片,浏览器就会有安全提示“下载多文件”提醒,允许即可。

另外,若图片格式是JPG,下载后会被自动存储为JFIF格式。JFIF是图片存储格式之一,由JPEG格式衍生而来,后缀为".jfif"。如果应用不便,直接修改后缀为.jpg即可。


HTML HTML5 download <a>标签下载 HTML<a>标签属性