个人中心
gpt4 book ai didi

javascript - Angular JS : Loading bar on CSV download from REST service

转载 作者：行者123 更新时间：2023-11-30 16:01:02 26 4
gpt4 key购买 nike

我有下面的代码片段，它调用 REST 服务来下载 CSV。

var link = document.createElement('a');
link.setAttribute('href',rest_URL);
document.body.appendChild(link);
link.click();

现在我计划在 CSV 下载到浏览器之前在单击链接时显示加载栏。怎么办？？

我尝试使用 $http，但我不想将内容显示为对象，然后再转换为 CSV。

是否有任何 Angular 功能可用于监控链接点击，并在链接操作完成时触发事件？

我有加载条形码，只需要帮助在从上面的 anchor 标记返回响应后获取操作完成事件，而不是通过 $http。

一些 Angular 专业知识会很有帮助。

最佳答案

有多种选择可以实现您想要的效果。开箱即用，以下是其中一些:

我个人使用最后一个，但请注意，如果您打算使用 Angular Material，我建议您使用稳定版本而不是候选发布版本 :D

这里有一些代码可以帮助您!

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .config(function($mdThemingProvider) {})
  .controller('AppCtrl', ['$scope', '$interval',
    function($scope, $interval) {
      var self = this,
        j = 0,
        counter = 0;

      self.mode = 'query';
      self.activated = true;
      self.determinateValue = 30;
      self.determinateValue2 = 30;

      self.showList = [];

      /**
       * Turn off or on the 5 themed loaders
       */
      self.toggleActivation = function() {
        if (!self.activated) self.showList = [];
        if (self.activated) {
          j = counter = 0;
          self.determinateValue = 30;
          self.determinateValue2 = 30;
        }
      };

      $interval(function() {
        self.determinateValue += 1;
        self.determinateValue2 += 1.5;

        if (self.determinateValue > 100) self.determinateValue = 30;
        if (self.determinateValue2 > 100) self.determinateValue2 = 30;

        // Incrementally start animation the five (5) Indeterminate,
        // themed progress circular bars

        if ((j < 2) && !self.showList[j] && self.activated) {
          self.showList[j] = true;
        }
        if (counter++ % 4 == 0) j++;

        // Show the indicator in the "Used within Containers" after 200ms delay
        if (j == 2) self.contained = "indeterminate";

      }, 100, 0, true);

      $interval(function() {
        self.mode = (self.mode == 'query' ? 'determinate' : 'query');
      }, 7200, 0, true);
    }
  ]);


/**
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
**/
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Angular Material Buffer Bar</title>

  <!-- CSS -->
  <link href="https://material.angularjs.org/1.1.0-rc.5/docs.css" rel="stylesheet" />
  <link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />
</head>

<body>


    <!-- Buffer Bar, there are other types of bars you can pick, I chose this one!-->
  <div ng-controller="AppCtrl as vm" layout="column" layout-margin="" style="padding:25px;" ng-cloak="" class="progressLineardemoBasicUsage" ng-app="MyApp">

    <h4 class="md-title">Buffer</h4>

    <p>
      For operations where the user wants to indicate some activity or loading from the server, use the <b>buffer</b> indicator:
    </p>
    <md-progress-linear class="md-warn" md-mode="buffer" value="{{vm.determinateValue}}" md-buffer-value="{{vm.determinateValue2}}" ng-disabled="!vm.showList[0]"></md-progress-linear>

  </div>


  <!-- JavaScrip -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
  <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  

</body>

</html>

此外，您还有加载屏幕!

关于javascript - Angular JS : Loading bar on CSV download from REST service，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37748424/

26 4 0
文章推荐： javascript - 我如何在 CucumberJS 中跨多个步骤定义文件共享我的 World 实例？
文章推荐： javascript - 如何在codeigniter中的ajax之后仅加载指定的div
文章推荐： javascript - 如何刷新模式中显示的字段
文章推荐： javascript - iOS 应用商店中的 Cordova 和 Google Maps Javascript 问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com