前端文件下载实现方法

前端下载文件

// 文件路径
const url= "https://mk-sit-1251517970.cos.ap-guangzhou.myqcloud.com/120184854663673856/aigc/image/aigc/image/image_175250240796018688.JPG"
// 下载方法
fetch(url)
      .then(res => res.blob())
      .then(blobData => {
        const downloadLink = URL.createObjectURL(blobData);
        let a: HTMLAnchorElement | null = document.createElement('a');
        const name = url.split('/').reverse()[0].split('.')[0];
        a.href = downloadLink;
        a.download = name;
        a.click();
        a.remove();
        a = null;
        URL.revokeObjectURL(downloadLink);
      })
      .catch(error => {
        console.error('下载失败:', error);
      });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

前端下载文件流文件

api
    .exportUserList({ mobileNo: mobileNo.value, nickname: nickname.value })
    .then(res => {
        console.log('~~exportUserList~~', res);
        // @ts-ignore
        const blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=ANSI'});
        const downloadLink = URL.createObjectURL(blob);
        let a: HTMLAnchorElement | null = document.createElement('a');
        const name = '用户清单.xlsx';
        a.href = downloadLink;
        a.download = name;
        a.click();
        a.remove();
        a = null;
        URL.revokeObjectURL(downloadLink);
      })
      .catch(error => {
        console.error('下载失败:', error);
      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

如果下载文件打不开的话，需要添加请求参数：

{responseType: "blob"}
1