vue文件下载调取浏览器下载进程

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

通过npm install streamsaver下载插件

import streamSaver from "streamsaver"
 
 
export const downloadFile = (data,filename) => {
  return fetch(`/files/download?paths=${data}`,{
    method:'GET',
}).then(res=>{
    // 创建写入流 filename为下载的文件名 
    const fileStream=streamSaver.createWriteStream(filename,{
        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();
})
}