如何在导出excel时显示加载(Processing)?

时间:2014-12-18 09:39:09

标签: javascript jquery ajax

单击export excel选项后,对后端代码的调用将从服务器端获取文件( file_name.xls )。它将通过document.location.href下载

jQuery("#exportExcel").click(function() {
                    $("#loading").show();
                    var exportExcelUrl='/portal/portalDownloadExcel?fileType=main';
                    document.location.href=exportExcelUrl;
                    $("#loading").hide();

        });

但上述步骤无法隐藏处理图片,因为我无法获得服务器的响应。

我试过ajax format来显示加载,但是文件下载的所有内容都有特殊字符。     要删除这些特殊字符,我使用了:' encodeURIComponent,blob,特殊字符移除器'

1 个答案:

答案 0 :(得分:0)

我使用AngularJS并为报告创建特定服务:

    app.factory('Report', function ($q, $sce, $http, API_LINK) {
  var report = {
    getTypes: function () {
      return [
        {name: 'html', title: 'HTML'},
        {name: 'pdf', title: 'PDF'},
        {name: 'excel', title: 'Excel'}
      ]
    },
    get: function (name, type, params, returnResult) {
      var html = type === 'html';
      params = params ? params : {};
      var p = {
        params: params,
        name: name,
        type: type
      };
      var url = API_LINK + 'report?' + $.param(p);

      var config = {
        method: 'GET',
        url: url
      };
      if (!html) {
        config.responseType = 'arraybuffer';
      }
      var http = $http(config);
      if (returnResult) {
        var deferred = $q.defer();
        http.error(function () {
          deferred.reject();
        });
      }
      http.success(
        function (data, status, headers) {
          if (returnResult) {
            return deferred.resolve($sce.trustAsHtml(data));
          }
          var type = headers('Content-Type');
          if (html) {
            var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
            var win;
            if (isFirefox) {
              win = window.open('');
            } else {
              var params = ['height=' + screen.height, 'width=' + screen.width, 'fullscreen=yes'];
              win = window.open('', '_newtab', params.join(','));
            }
            if (win) {
              win.moveTo(0, 0);
              win.document.write(data);
              win.focus();
            } else {
              alert('Please allow popups for this site');
            }
          } else {
            var contentDisposition = headers('Content-disposition');
            var filename = 'Report ' + (new Date).toShortString() + ' ' + (new Date).toShortTimeString() + '.';
            if (type = 'application-pdf') {
              filename += 'pdf';
            }
            if (angular.isString(contentDisposition)) {
              filename = contentDisposition.split('"')[1];
            }
            var file = new Blob([data], {type: type});
            saveAs(file, filename);
          }
        });
      if (returnResult) {
        return deferred.promise;
      }
    }
  };
  return report;
});

也许这会对你有所帮助