先看Demo 点击这里
康哥的《在浏览器端用JS创建和下载文件》,这篇文章写的很不错,其中关于下载这部分,解决了一些困扰已久的问题,本文基于保存文件的基础上,做一些新的尝试(当然,老外比我们走得早一些,已经将此方法用在站点上)

直接切入正题。

传统浏览器下载文件

传统浏览器下载文件,一般都是浏览器直接下载文件,我们以前无法做到

  • 监控文件的下载进度和速度
  • 控制文件下载的行为(暂时or停止)

如今,PowerfulJs使我们做到了上述能力,可以预见,Web版的类迅雷的工具也将会出现了

实现原理

其实原理也是很简单的,简单说来,我们使用Ajax来请求文件,并可以用事件来监测我们下载了多少,一共有多少需要下载,这样也可以算出下载的速度(当然这里还可以做Web版网速测试工具),然后再用文件保存方法将其保存下来就可以了

当然这些功能,是要依赖于XHR2的能力的

具体的实现细节如下

设置responseType为blob

然后监听下载的process事件

 

下载文件

这里下载文件的方法具体可以参考康哥的上篇文章,这里我们使用一个老外封装好的库FileSaver.js来下载文件

 

浏览器表现

由于机器上没有Firefox,没有Firefox的测试结果

Chrome:   显示下载进度,成功下载后,如果对于一般文件会直接保存,如下图,注意这里的顺序,这里是先下载完成,浏览器出现下图的时候是直接保存完成的!

对于一般的文件,chrome不会有提示

下载完成

 

对于敏感的文件,chrome会提示是否保留或放弃

QQ截图20140108000948

 

IE11下表现:

IE11下表现也是很乖的,完全可以运行,便其不管什么文件都会提示是否保存

ie11下表现

 

 

具体Demo请点击这里

 

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2014/01/powerfuljs-2-to-download-large-files-using-js/

  1. victoria 2017 年 7 月 10 日

    首先感谢您的分享,简单的尝试了下,文件可以正常下载。方法简介明了。但是我还有两个问题没有解决:
    1.这个方法对文件大小有限制么?
    2.利用这个方法怎样实现文件分块下载(假设每次请求,服务器只返回文件的一部分数据)么?

  2. 2017 年 3 月 9 日

    if (success) success(xhr.response);请问这句是什么意思,为什么success可以放到if括号里,后面success怎么又成函数了?后面调用函数的时候,success怎么又替换成函数了。请大神解答。

  3. Mr.zhan 2014 年 3 月 22 日

    刚刚测试了一下请求服务器的数据,类型为json,progress 返回值中只有 loaded 没有 total

    请问是为什么呢,这样没办法用作进度条的

  4. 电丶灵 2014 年 2 月 20 日

    类迅雷的WEB下载器感觉没啥用
    原因如下:
    1、浏览器要崩溃就白下了,我觉得没办法做到断点续传功能(应该这么叫吧)
    2、没有下载加速(毕竟是以浏览器为媒介)
    3、没有离线下载功能

    如果能做到这三点,到还有作用

  5. Tian 2014 年 1 月 11 日

    我下了Demo测试了下,好像只能下载当前域的文件,远程文件下载不了。

    • ijse 2014 年 2 月 6 日

      需要配置HTTP header解决跨域问题

      • gacia 2014 年 5 月 13 日

        求教,如何解决跨域问题呢?

发表评论