【vue pc端】下载文件

最新推荐文章于 2024-12-16 16:04:00 发布

原创最新推荐文章于 2024-12-16 16:04:00 发布 · 499 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue下载文件 #下载文件却打开文件 #fetch解决下载文件问题

vue工作专栏收录该内容

26 篇文章

订阅专栏

这篇博客介绍了一种利用原生fetch API下载文件的方法，能够避免浏览器将文件打开而不是下载。传统方法如a标签加download属性或直接使用blob API可能会导致问题，但通过fetch获取响应并转化为blob，创建隐藏a标签点击下载，然后释放URL资源，可以实现完美下载。此方法适合放入mixin中复用。

利用原生fetch下载文件，该方法完美解决了浏览器下载文件会打开文件（本身是下载，结果却打开文件变成了预览文件）的问题。

tips:

1.在a标签上加download属性有时会不管用

2.直接使用blob API将url转换为blob地址，API会直接将url认为是字符串，所以下载文件后打开文件显示文件已损坏

3.推荐将该方法放入mixin中，需要使用的组件可引入

//url:文件地址
//fileName 文件名
download(url,fileName){
            // 利用原生fetch直接下载文件
            fetch(url).then(res => res.blob()).then(blob => { 
                let eleLink = document.createElement("a");
                eleLink.style.display = "none";
                eleLink.target = "_blank";
                eleLink.setAttribute('download',fileName);
                eleLink.href = URL.createObjectURL(blob);
                document.body.appendChild(eleLink);
                eleLink.click();
                URL.revokeObjectURL(eleLink.href);
                document.body.removeChild(eleLink);
            })
        }