导出Excel时如何显示加载（处理中）？

Question

When export excel option is clicked, a call to the backend code will get the file( file_name.xls ) from server side.It gets downloaded through document.location.href

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

        });

But above steps can't hide the processing image, because I don't get server's response.

I have tried the ajax format to show loading , But file downloaded all the content has special characters. To remove these special characters, i have used the : 'encodeURIComponent,blob,special characters remover'

Answer 1

I use AngularJS and create specific service for reports:

    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;
});

Maybe this will help you