前端下载 记录

统一的下载逻辑

function downloadFile(data:string, type:string, filename:string) {
    // 创建Blob对象
    const blob = new Blob([data], {type: type});
    // 创建URL对象
    const url = URL.createObjectURL(blob);
    // 创建a标签
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    // 触发下载
    a.click();
    // 释放内存
    URL.revokeObjectURL(url);
  }

React

• umi框架

``` //第一种方法 ---------------------------------------------------------- // 直接通过window.open打开url路径即可自动下载 // 好处:不用通过从 content-disposition 中取出文件名称 坏处：无法判断下载是否成功进而给用户提示 // window.open(下载地址url);

// 第二种方法 ----------------------------------------------------------
// 接口配置 getResponse:true  
request(`/api/progress/${params.id}/download`, {
    getResponse:true,
});

// 调用接口返回res，从res中取出文件名称
res.response.headers.get('content-disposition')?.split("=")[1]
// 调用下载函数进行下载
downloadFile(res.data, "text/csv", fileName);  
```

Vue

• Vue webpack

 ```
 // 第一种
 window.open(`下载地址url`);

 // 第二种 通过blob下载
 // 获取文件名称
 res.headers["content-disposition"].split("=")[1]
 ```