文件下载显示进度条以及调取浏览器下载进程

您所在的位置：网站首页 › ps4点了下载怎么没进度条 › 文件下载显示进度条以及调取浏览器下载进程

文件下载显示进度条以及调取浏览器下载进程

2024-07-17 20:37| 来源: 网络整理| 查看: 265

最近遇见项目的文件下载功能总结了两种获取文件下载进度的方法

1 .axios

在axios里可调取onUploadProgress方法来获取通过判断是否存在lengthComutable来获取下载进度

export const downloadFile = (data,source) => { return http({ url: `/files/download?paths=${data}`, method: 'get', responseType:'blob', cancelToken: source.token, onDownloadProgress: function (progressEvent) {//axios封装的原生获取下载进度的事件，该回调参数progressEvent中包含下载文件的总进度以及当前进度 if (progressEvent.lengthComputable) { //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量 //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded let downLoadProgress = null downLoadProgress = progressEvent.loaded / progressEvent.total * 100 //实时获取最新下载进度 } } }) } 缺点:

不如调取浏览器下载进程方便但在页面里如果需要获取下载进度条时优化选择此方案

2.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(); }) }

【本文地址】

文件下载显示进度条以及调取浏览器下载进程

文件下载显示进度条以及调取浏览器下载进程

今日新闻

推荐新闻