526互联

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

发布时间 2023-12-12 17:09:04作者: Swlymbcty

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

通过npm install streamsaver下载插件

 1 import streamSaver from "streamsaver"
 2  
 3  
 4 export const downloadFile = (data,filename) => {
 5   return fetch(`/files/download?paths=${data}`,{
 6     method:'GET',
 7 }).then(res=>{
 8     // 创建写入流 filename为下载的文件名 
 9     const fileStream=streamSaver.createWriteStream(filename,{
10         size:res.headers.get("content-length")
11     })
12     const readableStream=res.body;
13     if(window.WritableStream&&readableStream.pipeTo){
14         return readableStream.pipeTo(fileStream).then(()=> {
15  
16         })
17     }
18     window.writer=fileStream.getWriter();
19     const reader=res.body.getReader();
20     const pump=()=>reader.read().then(res=>res.done? 
21     window.writer.close():window.writer.write(res.value).then(pump))
22     pump();
23 })
24 }