Laravel excel 结合 jquery.fileDownload.js开发

因为最近项目有个需求，点击按钮，页面显示loading…，且同时在开始下载的时候，loading…要消失，就是说，需要在开始下载或者下载完执行一个回调机制，然而比较麻烦的是，通过form提交的，是没有回调功能，所以只能用JS了

网上找过很多方法，最开始用httpRequest，方法是可行的，但是如果数据了稍微多一点，就返回500了，所以只能放弃了

最后使用jquery.fileDownload.js

我本机环境 “maatwebsite/excel”: “^3.1”,“laravel/framework”: "5.8.",“php”: “^7.1.3”,*

前端部分比较简单，网上教程：

	<script src="{{ asset('/js/jquery.fileDownload.js') }}"></script>



	$.fileDownload("{{ url('admin/report/index') }}", {
          httpMethod: 'POST',
          data: {
              _token: "{{ csrf_token() }}"
          },
          prepareCallback: function (url) {
              showLoading();
              console.log("正在下载，请稍后...");
          },
          successCallback: function (url) {
              console.log("SUCCESS导出完成！");
              hideLoading();
          },
          failCallback: function (html, url) {
              console.log("ERROR");
          }
      });

后端需要加上Set-Cookie:fileDownload=true; path=/,，如下：

return Excel::download(new OrderExcelSheet($request), 'report-'.$data['report_type'].'-'.date('YmdHis').'.xlsx',null,['Set-Cookie' => 'fileDownload=true; path=/']);

到这里，正常情况下应该是可以的，但是坑现在才开始。

前端控制台一直都没有执行successCallback，然后看jquery.fileDownload.js 源码，
找到 checkFileDownloadComplete() 方法：这个方法是用来判断是否下载成功的，代码如下：

function checkFileDownloadComplete() {

            //has the cookie been written due to a file download occuring?
            if (document.cookie.indexOf(settings.cookieName + "=" + settings.cookieValue) != -1) {
                
                //execute specified callback
                internalCallbacks.onSuccess(fileUrl);

                //remove the cookie and iframe
                document.cookie = settings.cookieName + "=; expires=" + new Date(1000).toUTCString() + "; path=" + settings.cookiePath;

                cleanUp(false);

                return;
            }

            //has an error occured?
            //if neither containers exist below then the file download is occuring on the current window
            if (downloadWindow || $iframe) {

                //has an error occured?
                try {

                    var formDoc = downloadWindow ? downloadWindow.document : getiframeDocument($iframe);

                    if (formDoc && formDoc.body != null && formDoc.body.innerHTML.length) {

                        var isFailure = true;

                        if ($form && $form.length) {
                            var $contents = $(formDoc.body).contents().first();

                            if ($contents.length && $contents[0] === $form[0]) {
                                isFailure = false;
                            }
                        }

                        if (isFailure) {
                            internalCallbacks.onFail(formDoc.body.innerHTML, fileUrl);

                            cleanUp(true);

                            return;
                        }
                    }
                }
                catch (err) {

                    //500 error less than IE9
                    internalCallbacks.onFail('', fileUrl);

                    cleanUp(true);

                    return;
                }
            }


            //keep checking...
            setTimeout(checkFileDownloadComplete, settings.checkInterval);
        }

在其他位置，调用这方法的是代码是这样的：

setTimeout(checkFileDownloadComplete, settings.checkInterval);

settings.checkInterval是配置参数，默认值是100

由此可见，逻辑可能是这样的，当用户点击下载的时候，在下载的途中，checkFileDownloadComplete() 就会不断查找cookie 里面有无fileDownload=true
当下载完成的时候，就会通过cookie 记录fileDownload=true，这个时候checkFileDownloadComplete() 就会执行成功，回调successCallback

settings
cookieName: “fileDownload”,
cookieValue: “true”,

document.cookie.indexOf(settings.cookieName + "=" + settings.cookieValue) != -1)

逻辑了解了，但是依然没有 执行successCallback()
检查浏览器的cookie ，发现一个坑，

原来laravel 并没有将fileDownload 设成true，而是一段字符串，所以没有执行到 successCallback()

修改方法：

if (document.cookie.indexOf(settings.cookieName + "=" + settings.cookieValue) != -1) {

改：

if (document.cookie.indexOf(settings.cookieName + "=") != -1) {

忽略这个true

运行成功！