vue实战 流文件下载

文件下载通常有以下几种方法

1. 通过url下载
2. 通过地址跳转location.href 下载
3. 通过提交form表单下载
4. a.download结合blob对象进行下载

暂时只用过第四种，使用成功，因此总结文件下载方法四

a.download结合blob对象进行下载

一、思路

1. 利用Bold接收数据
2. 利用a标签做文件下载

二.相关代码

1. 调用方法

export const exportAlarmList = (data:any) =>
  axios.post(
    url,
    data,
    {
      headers:
        {'Content-Type':'application/json' },
      responseType: 'blob'
    });

2. 返回结果

let fileName = decodeURI(error.headers['content-disposition'].split(';')[1].split('=')[1]);
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        // 生成文件路径
        let url = window.URL.createObjectURL(blob);
        //生成<a></a>DOM元素
        let el = document.createElement('a');
        //链接赋值
        el.href = url;
        el.setAttribute('download', fileName);
        //必须点击否则不会下载
        el.click();
        //移除链接释放资源
        window.URL.revokeObjectURL(url);

三 .代码要点:

1. 设置responseType: 'blob’: 解决下载下来的文件乱码问题

2. 设置type: 'application/vnd.ms-excel; 设置excel文件的格式.(该格式需要与后台确认)

   office中后缀对应的content-type查看

3. 若后台传过来的文件名中有中文,则需要对该文件名进行转码

4. responseType是单独的，不可写入header中