blob数据流下载文件_blob数据下载

前言

此方法可以判断文件是否下载成功，以及文件下载什么时候完成

一、方法封装

common.js

  // 判断是否为json字符串
  isJSON(str) {
    if (typeof str == 'string') {
      try {
        let obj = JSON.parse(str);
        if(typeof obj == 'object' && obj ){
          return true;
        }else{
          return false;
        }
      } catch(e) {
        return false;
      }
    }
  },
  /**
   * @description: bolb 数据流处理下载文件
   * @param {*} data 接口返回数据
   * @param {*} fileName 文件名
   * @return {*}
   */
  downLoadFileBlob(data, fileName) {
    const self = this;
    const blob = new Blob([data], { type: 'charset=utf-8' })
    const file = new FileReader();
    file.readAsText(blob, 'utf-8');
    file.onload = function () {
      // 判断返回的是数据流还是json对象
      if (self.isJSON(file.result)) {
        // 若返回的是json对象，不进行下载操作
        const jsonData = JSON.parse(file.result);
        Message.closeAll();
        Message({
          type: "error",
          message: jsonData.message || "下载失败"
        })
        return
      } else {
        // 若返回的是不是json对象，进行下载操作
        const fileUrl = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = fileUrl
        link.download = fileName
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }
    }
  }
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49

二、使用示例

api.js

  downloadFile: async function (params) {
    return request({
      url: "api/file/v1.0/downloadFile?" + qs.stringify(params),
      responseType: 'blob',
      method: "get"
    })
  }
1
2
3
4
5
6
7

方法调用

    exportData() {
      let params = {};
      // ...
      testApi
        .exportExcel(params)
        .then((res) => {
          commonFun.downLoadFile(res.data, "test.xlsx")
        })
        .catch((err) => {
          console.log('testApi.exportExcel---', err);
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12

---

注意

1.此方法，不可在项目里引入使用mock，否则 responseType: 'blob 不起作用

2.此方法需要前端自定义文件名

也可以从 headers['content-disposition']中获取文件名，但是需要后端设置

response.setHeader("Access-Control-Expose-Headers", "content-disposition");
1

否则前端无法获取