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

最新推荐文章于 2024-05-15 00:45:24 发布

小胖妮宝

最新推荐文章于 2024-05-15 00:45:24 发布

阅读量2.7k

点赞数 2

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

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

版权

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

1 篇文章 0 订阅

订阅专栏

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()