文档流下载——axios+fetch两种方式下载——技能提升

axios+fetch实现文档流的下载

之前写过一篇关于 文档流下载的方法，当时是用的fetch，使用axios的并没有实现文档流的下载。

下载文档流文件——基础提升 链接：https://blog.csdn.net/yehaocheng520/article/details/122575003?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166798115116800192269945%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166798115116800192269945&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_blogfirst_rank_ecpm_v1~rank_v31_ecpm-1-122575003-null-null.nonecase&utm_term=%E6%96%87%E6%A1%A3%E6%B5%81&spm=1018.2226.3001.4450

下面介绍axios的使用方法

1.使用axios实现文档流的下载——responseType: ‘blob’

必须使用responseType: 'blob'作为config配置参数才可以对文档流进行处理。且这个参数需要放在入参的后面。

比如：

axios.post(url,params,config).then(....)
1

1. url：接口地址
2. params：入参
3. config：配置参数
1
2
3

如果是封装好的axio方法，比如我们公司封装的如下：

//导出
  exportExcel(params, config) {
    return request(
      getUrl('/api/product/get-excel-orders20221107'),
      METHOD.POST,//post还是get，根据接口来
      params,
      config
    );
  },
1
2
3
4
5
6
7
8
9

其他的不用注意，只需要知道一点：config和params要同级别，且需要是对象的形式才可以。

完整版代码：

exportExcel(
  {//入参
    ...this.params,
    skipCount: 0,
    maxResultCount: this.formData.num,
  },
  {//配置
    responseType: 'blob',
  }
)
.then((res) => {
console.log(res);//打印的内容如下
  let blobUrl = window.URL.createObjectURL(res);
  let link = document.createElement('a');
  link.style.display = 'none';
  link.download = `订单列表.xlsx`;
  link.href = blobUrl;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  this.handleCloseOrderDetail();
})
.catch((res) => {
  this.$message.error(res.message);
})
.finally(() => {
  this.submitLoading = true;
});
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

通过上面的接口调用，打印的res返回值如下：

针对blob对象，可以通过下面的方法来处理：
let blobUrl = window.URL.createObjectURL(res); 通过这个可以将blob对象转为链接地址

下面将链接通过a标签进行下载：

let link = document.createElement('a');
link.style.display = 'none';
link.download = `订单列表.xlsx`;
link.href = blobUrl;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
1
2
3
4
5
6
7

2.使用fetch下载文档流(也能实现，不过代码量巨大)

下面的代码中用到了：

1.cookie ：需要安装js-cookie，然后当前页面引入 import Cookie from 'js-cookie';
2.baseUrl：接口地址一般根据开发生产环境的不同，域名链接也不同，此处需要进行判断处理
3. 如果是post请求，则需要指定头部的`content-type`类型为：application/json，入参需要是JSON.stringfy({xxx})
4. 如果是get请求，则需要指定头部的`content-type`类型为：application/x-www-form-urlencoded，入参需要是拼接到请求地址上的key value的形式
1
2
3
4

2.1 post请求的案例

var baseUrl = 'xxx';
var myHeaders = new Headers();
var Authorization = Cookie.get('Authorization');
myHeaders.append('Authorization', Authorization);
myHeaders.append('content-type', 'application/json');
var requestOptions = {
  method: 'post',
  headers: myHeaders,
  body: JSON.stringify({
    ...this.params,
    skipCount: 0,
    maxResultCount: this.formData.num,
  }),
  redirect: 'follow',
};
fetch(
  `${baseUrl}/api/product/get-excel-orders20221107`,
  requestOptions
)
  .then((response) => {
    return response.blob();
  })
  .then((res) => {
    this.handleCloseOrderDetail();
const link = document.createElement('a');
let blob = new Blob([res], {
  type:
    ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'",
});
link.href = URL.createObjectURL(blob);
link.download = `订单列表.xlsx`;
link.click();
this.$message.success('导出成功');
  })
  .catch((error) => console.log('error', error))
  .finally(() => {
    this.submitLoading = true;
  });
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

2.2 get请求的案例

var baseUrl = 'xxx';
var myHeaders = new Headers();
var Authorization = Cookie.get('Authorization');
myHeaders.append('Authorization', Authorization);
myHeaders.append('content-type', 'application/x-www-form-urlencoded');
var requestOptions = {
  method: 'get',
  headers: myHeaders,
  redirect: 'follow',
};
fetch(
  `${baseUrl}/api/product/get-excel-products20221107?${params}`,
  requestOptions
)
  .then((response) => {
    return response.blob();
  })
  .then((res) => {
    this.handleCloseOrderDetail();
    const link = document.createElement('a');
    let blob = new Blob([res], {
      type:
        ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'",
    });
    link.href = URL.createObjectURL(blob);
    link.download = `商品管理列表.xlsx`;
    link.click();
    this.$message.success('导出成功');
  })
  .catch((error) => console.log('error', error))
  .finally(() => {
    this.submitLoading = true;
  });
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

上面代码中用到了一个将对象转为key value键值对的方法：

joinUrlParams(params, usedKey = []) {
  let param = '';
  for (var key in params) {
    if (
      params[key] !== '' &&
      typeof params[key] !== 'undefined' &&
      params[key] !== null
    ) {
      if (usedKey.length > 0) {
        for (var i = 0; i < usedKey.length; i++) {
          if (key == usedKey[i]) {
            if (param != '') {
              param += '&';
            }
            param += key + '=' + params[key];
            break;
          }
        }
      } else {
        if (param != '') {
          param += '&';
        }
        param += key + '=' + params[key];
      }
    }
  }
  return param;
}
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

相比较而言，axios会更简洁，且post get不做太多的区分。

完成！！！感谢大家的支持！！！