文件下载时如何在浏览器左下角显示下载进度

前端在使用axios发送网络请求时，如文件下载，无法实时获取当前已经下载的文件流，只有当后端返回全部流时，才能在浏览器右下角显示已经完成的进度。 但是当文件很大时，就会出现长时间的等待，而且不显示下载进度。 此时可以通过fetch来发送网络请求实时获取已经下载的文件流, 同时需要依赖一个第三方npm包 streamsaver

export function fileDownloadHandle(url,method,name,size){
    fetch(url,{
        method:method,
    }).then(res=>{
        const fileStream=streamSaver.createWriteStream(name,{
            size:res.headers.get("content-length")
        })
        const readableStream=res.body;
        if(window.WritableStream&&readableStream.pipeTo){
            return readableStream.pipeTo(fileStream).then(()=> {

            })
        }
        window.writer=fileStream.getWriter();
        const reader=res.body.getReader();
        const pump=()=>reader.read().then(res=>res.done? window.writer.close():window.writer.write(res.value).then(pump))
        pump();
    })
}

这样就可以显示进度了。

tip: 如果是火狐浏览器会出现

TypeError: undefined is not a constructor (evaluating 'new streamSaver.WritableStream')

此时需要做兼容性处理引入

web-streams-polyfill

在 script 标签中引入

<script src="https://unpkg.com/web-streams-polyfill/dist/polyfill.min.js"></script>

在script中引入后如果在chromium中也出现错误，需要按需进行引入

function judge(){
    const userAgent=navigator.userAgent;
    if(userAgent.indexOf("Firefox")>-1){
        return "火狐浏览器";
    }else if(userAgent.indexOf("Chrome")>-1){
        return "谷歌浏览器";
    }else {
        return ""
    }
}
if(judge()==="火狐浏览器"){
    let script=document.createElement("script");
    script.setAttribute("src","https://unpkg.com/web-streams-polyfill/dist/polyfill.min.js")
    document.body.appendChild(script);
}