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

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

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

  一、a 标签下载

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

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

    下载
    

    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) // 将二进制文件转化为可访问的url
                let 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
            })
        },