fetch的文件流下载及下载进度获取

最新推荐文章于 2024-12-26 09:13:17 发布

weixin_30642029

最新推荐文章于 2024-12-26 09:13:17 发布

阅读量3.7k

点赞数

文章标签： javascript java 前端 ViewUI

原文链接：http://www.cnblogs.com/chengyunshen/p/11376735.html

版权

本文探讨了如何在前端使用fetch API处理文件流下载，并通过getReader()实现下载进度的获取。尽管fetch不直接支持xhr或ajax的progress事件，但可以利用Blob和a标签实现文件的下载。尽管这种方式在体验上可能不如传统的a标签直接下载，后者能立即弹出保存窗口并利用浏览器内置的下载工具。

摘要由CSDN通过智能技术生成

下载过程中，获取进度，fetch API并没有提供类似xhr和ajax的 progress所以用 getReader()来循环读取大小

     let  size = 0;
          fetch( URL() + `/sys/file/download/${uuid}`,{
            method: 'GET',
            headers:{
                token,
            }
        })
        .then(response => {
            if(response.ok){
                return response;
            }else{
                console.log("请求失败")
            }
        })
            // 取出body
            .then(response => response.body)
            .then(body => {
              const reader = body.getReader();

                  return new ReadableStream({
                    start(controller) {
                      return pump();

                      function pump() {
                        return reader.read().then(res => {   //res  ({ done, value })