数据导出／文件下载 实现方案

前言：项目初期，工期多任务量大，我们选择了kendo grid框架。排序，导出，过滤，分页全部采用了kendo自带的前端配置。优点就是开发特别快，缺点就是当我们的用户量庞大，数据量达到了10w+级别的时候，前端分页太慢。所以过滤排序都要改为后端开发，导致后端开发量增加。由于导出数据量巨大，而且涉及到链表查询，导出速度缓慢，导出需求也提高为可以实时终止导出操作。完成导出后要有提示文案。所以后端崩盘了。。。作为他们的好基友，前端有必要站出来救救他们了。

---

不瞎扯了，导出方案一共考虑了三种。

1.XMLHttp封装一个ajax方法。

github上也有类似的方案。这里就不细说了。

2.ajax 加 link

• location.href 将页面跳转到文件下载地址可以轻松的完成下载需求。但是没发实时终止请求，且下载完成后，并没有对应的event来提示完成下载的文案。

• ==解决方法==：文件下载的时间基本为后端服务器的链表查询及运算时间，数据的传输时间基本可以忽略。所以ajax请求后端完成链表查询，运算及生成excel等类型文件后，返回文件的地址。我们在用location.href跳转到下载地址即可完成下载。

• ==优缺点==：文件下载完成的提示时间并不准确（还要等待文件真正的下载时间）。后端工作量偏大，又要开发两个接口，时间紧急，希望前端救火。

3.点击导出按钮弹出莫太框中嵌套iframe src =文件导出的action？time=new Date.valueOf()，请求返回后后端在header中设置cookie = time参数。

• ==详细描述一下==：window.open(url); 在新的窗口中访问文件的下载action。关闭网页就可以终止下载。但是打开新的窗口不符合业务需求。所以我们在莫太框里嵌套iframe然后把它隐藏，让他加载文件的下载地址。这样关闭莫太框时就终止了文件下载。剩下的问题就是==如何知道什么时候文件下载完成了==？再点击导出按钮，弹出莫太框的时候，我们把点击的时间var time= new Date.valueOf()这个时间戳 已参数的形式传递过去。后端运行完成后，response的header中帮我们设置了cookie = 我们传递的时间戳。我们在点击按钮后，监控cookie，当cookie的值和我们本地的点击时创建的time相等时，说明下载完成了。
• ==优缺点==：依托后端已有的接口，稍作改动即可完成。后端没有太多开发量。下载完成的提示时间基本准确。缺点：如果后端服务挂掉了，不能像ajax一样获得响应。因为功能实现基于cookie，所以跨域请求可能会有些其他问题。
• ==注意事项==：后端设置cookie时，httponly要设置成false。否者前端没有cookie的读写权限。

---

“Talk is cheap,show me the code.”

<!--html 文件-->
<!--<div class="modal-header">-->
    <!--<h3 class="modal-title">下载excel</h3>-->
<!--</div>-->
<div class="modal-body">
    <span style="font-size: 16px;text-align: center;display: inherit;">{
   {
   download_tips}}</span>
    <iframe id="downloadIframe" ng-show="false" ng-src="{
   {
   down_url}}"></iframe>
    <!--<iframe ng-onload="iframeLoadedCallBack()" ng-src="{
   {
   down_url}}