【vue pc端】 下载文件

 利用原生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);
            })
        }

猜你喜欢

转载自blog.csdn.net/THcoding_Cat/article/details/113847485