使用axios来下载文件流

需求使用axios来下载文件流，并且实现进度。

实现代码

import axios from 'axios';

axios({
    url: 'https://test.com/xxxx.pdf',
    method: 'get',
    // 这里是关键，如果不填写为 blob，axios会尝试解析返回源为json。
    responseType: 'blob',
    // 这是浏览器才有的，下载进度回调函数
    onDownloadProgress: (evt) => {
        /** 获取的百分比进度，可以自行实现UI */
        const progress = Number(((evt.loaded / Number(evt.total)) * 100).toFixed());
    },
}).then(res => {
    /** 获取响应头的文件名 */
    const contentDisposition = res.headers['content-disposition'];
    /** 文件名 */
    let fileName = contentDisposition?.split(/filename=/)[1];

    // 这里就是创建一个a标签，等下用来模拟点击事件
    const a = document.createElement('a');
    // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
    const URL = window.URL || window.webkitURL;
    // 根据解析后的blob对象创建URL 对象
    const herf = URL.createObjectURL(res.data);
    // 下载链接
    a.href = herf;
    // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
    a.download = fileName;
    document.body.appendChild(a);
    // 点击a标签，进行下载
    a.click();
    // 收尾工作，在内存中移除URL 对象
    document.body.removeChild(a);
    window.URL.revokeObjectURL(herf);
})