关于a标签的download定义文件名不起作用

小胖妮宝

于 2022-07-08 15:58:54 发布

阅读量3.2k

点赞数 2

分类专栏：基础小知识文章标签：前端

本文链接：https://blog.csdn.net/qq_41801059/article/details/125679903

版权

基础小知识专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML5中<a>标签的download属性，用于实现文件下载。然而，当href引用的是第三方资源或后台接口时，download属性可能失效。为解决这个问题，文章提供了一种通过接口获取文件流并在本地创建下载链接的方法，利用XMLHttpRequest请求文件，转换为blob，然后创建隐藏的a标签实现下载。这种方法可以绕过同源策略限制，实现跨域文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

download 属性是HTML5中新增的 <a> 标签属性。

注意:
- href属性的href 需要是限于同源文件，如果引用的是第三方或是调用后台的接口，download就会不起作用
- ```
<a href={} target="_blank" download='文件名字'>点击下载</a>
```
解决方法
改为接口请求到文件流本地重新创建

               const xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);  // url 文件的完整地址 http:XXX
                xhr.responseType = 'blob';
                xhr.onload = function () {
                  if (xhr.status === 200) {
                    const res = xhr.response;
                    const link = document.createElement('a');
                    link.style.display = 'none';
                    const url = window.URL.createObjectURL(res);
                    link.href = url;
                    link.setAttribute('download', `代码.xlsx`);
                    document.body.appendChild(link);
                    link.click();
                    window.URL.revokeObjectURL(link.href);
                    document.body.removeChild(link);
                  }
                }
                xhr.send()