vue ios端下载文件 vue实现文件下载功能

【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！

博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步!

吾等采石之人，应怀大教堂之心，愿大家奔赴在各自的热爱里…

文章目录

• 一、业务场景
• 二、代码分享
• 三、拓展补充

---

一、业务场景

场景一：如果你的文件是静态的存储在自己的服务器上；

使用window.location.href可以实现下载功能

//获取或者赋值一个下载路径
   let downUrl;
   //采用如下的方式可以直接下载文件
   window.location.href = downUrl;

如上的路径对应服务器上文件存储的路径即可，在一定的场景下是不需要后台的

---

场景二：如果你的文件需要动态的生成，返回给你文件流，动态的生成excel文件等

比如你有一个人员管理系统，系统本身可以对人员信息进行修改，当然可以导出excel表格，此时这个文件就是一个动态的文件，要通过数据库的读取插入到当前的Excel文件中，返回值是一个文件流，返回给前端

困难-解决-反思-分享

---

二、代码分享

应用场景：后台是post请求，且返回的是文件流

当时查阅了很多资料，如下的代码亲测实现了访问后台下载文件

download() {
    let url = downURL; //后端接口对应的访问地址
    window.app.axios
        .get(url, {
            headers: {
                'Content-Type': "application/x-download'",
                token: sessionStorage.getItem('token') 
            },
            responseType: 'blob'
        })
        .then(function(response) {
            let blob = new Blob([response.data], {
                type: 'application/vnd.ms-excel'
            });
            let filename = 'Testfile.xls';
            if (window.navigator.msSaveOrOpenBlob) {
                // 兼容IE10
                window.navigator.msSaveBlob(blob, filename);
            } else {
                //  兼容chrome/firefox
                let aTag = document.createElement('a');
                aTag.download = 'Testfile.xls';
                aTag.href = window.URL.createObjectURL(blob);
                aTag.click();
                URL.revokeObjectURL(aTag.href);
            }
        })
        .catch(function() {
            //如果不能正常下载给出对应提示
            this.$message({
                type: 'error',
                message: '文件下载失败'
            });
        });
}

后台的接口可以先使用postman测试

//downURL此出的url具体根据后端的地址拼接，此处只是给一个案例
window.location.protocol + '//' + window.location.hostname + 
(window.location.port ? ':' + window.location.port : '') + '/' + 'file/download'

此处headers为权限验证的token,如果没有可以不传

token: sessionStorage.getItem('token')

blob：response 是一个包含二进制数据的 Blob 对象 。

responseType: 'blob' // 表明返回服务器返回的数据类型

补充知识

//http://localhost:8888/#/
 window.location.protocol
 //"http:"
 window.location.host
 //"localhost:8888"
 window.location.hostname
 //"localhost"``

---