前端下载文件的方法-blob下载

前端经常会遇到下载文件的需求，后端一般提供的以下两种方法：

• 文件地址。后端直接提供要下载的文件地址，常用于图片、音视频等静态文件
• 文件流。后端返回文件流，常用于excel等动态文件

一、a 标签下载

1、直接html使用a标签下载

• href：文件链接
• download：下载时的文件名称，相当于重命名了，可以不设置该属性

<ahref="https://example.com/images/a.png"download="b.png">下载</a>

2、通过js方法借用a标签下载

downloadFile(fileurl){let a = document.createElement('a')// 创建一个a标签
    a.href = fileurl                      // 赋值链接
    a.style.display ='none'// 隐藏，设置元素不可见
    document.body.appendChild(a)// 添加a到页面
    a.click()// 模拟点击，进行跳转或下载操作
    document.body.removeChild(a)// 操作完成，移除a}

二、window 下载

1、window.location.href

downloadFile(fileurl){
    window.location.href = fileurl
}

2、window.open

downloadFile(fileurl){
    window.open(fileurl)}

注： window.open() 可能会被浏览器拦截器屏蔽，而 window.location.href 不会受到影响

三、blob下载流文件

1、引入axios

import axios from'axios'

2、blob下载

downloadFile(){// 文件地址，可携带参数const fileurl =`/file/example/excel/abc?id=${this.id}&appId=${this.appId}`// 请求并下载文件，可设置 headers
    axios
       .get(fileurl,{responseType:'blob',// 必须，指定响应的数据类型为二进制数据流（Blob对象）headers:{'X-Auto-Fp-Plate':'example',},}).then(response=>{let url = window.URL.createObjectURL(response.data)// 将二进制文件转化为可访问的urllet a = document.createElement('a')
            a.href = url
            a.style.display ='none'
            document.body.appendChild(a)// 一般在响应头的 content-disposition 里设置文件名称，下面是提取文件名示例const arr = response.headers['content-disposition'].split('filename=')const fileName =decodeURI(arr[arr.length -1])
            a.download = fileName  // 将获取的文件名赋值过去，也可自行赋值
            a.click()
            document.body.removeChild(a)
            window.URL.revokeObjectURL(url)// 释放url}).catch(error=>{// do something})},