- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

【前端文件下载】vue实现文件流动态下载（案例详解）

辰兮发表于 2022/03/22 23:05:49 2022/03/22

【摘要】【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、...

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

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

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

文章目录

一、业务场景

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

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

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

  
 
  1
  2
  3
  4

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

当然在开发过程遇到过问题也做过总结可参考：JavaScript前端判断文件是否存在

场景二：如果你的文件需要动态的生成，返回给你文件流，动态的生成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: '文件下载失败'
            });
        });
}

  
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35

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

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

  
 
  1
  2
  3

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

 token: sessionStorage.getItem('token') 

  
 
  1

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

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

  
 
  1

补充知识

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

  
 
  1
  2
  3
  4
  5
  6
  7