zoukankan      html  css  js  c++  java
  • angularjs ng-csv 异步下载

    相信之前我们 前端下载csv的时候 都是通过后台代码 生成文件,然后发送给前台 文件路径来进行下载,下面介绍一下angular1 ng-csv下载 csv数据(这种不通过后台代码来实现的前台下载)

    参考

    github

    https://github.com/asafdav/ng-csv

    1. 下载 angular-sanitize.min.js 和 ng-csv.min.js    

    2. 在app中注入

    var app = angular.module("app", ['ngSanitize',
        'ngCsv'
    ]);

    3. ctrl 使用

        $scope.filename = "datafile";
    
        $scope.getArray = function () {
    
            var deferred = $q.defer();
    
            ljkjHttp.paramData.errorMsg = false;
            ljkjHttp.paramData.param = {
                guid: $localStorage.setting.guid,
                Id: "",
                WenTitle: "",
                State: "",
                UName: "",
                BeginTime: "",
                EndTime: "",
                PageIndex: 1,
                PageSize: $scope.listDataCount
            };
            ljkjHttp.paramData.cmd = "MsQHFrSoftWenTaskList";//cmd
            ljkjHttp.paramData.function = "MsQHFrSoftWenTask";//language
            ljkjHttp.post()
                   .then(function (resData) {
                       if (resData.state == 0) {
                           var listData = angular.fromJson(resData.value);
                           var resArray = [];
                           for (var item in listData) {
                               resArray.push(
                                   {
                                       Id: listData[item].Id,
                                       订单编号: listData[item].OrderNumber,
                                       文章标题: listData[item].WenTitle,
                                       订单金额: listData[item].OrderPrice,
                                       创建时间: listData[item].CreateTime,
                                       写手: listData[item].UName,
                                       状态: $scope.stateData.get(listData[item].State)
                                   }
                               );
                           }
                           $q.when(resArray).then(function () {
                               deferred.resolve(resArray);
                           });
                       }
                   });
    
            return deferred.promise;
    
        }
    
        $scope.getHeader = function () { return ['Id', '订单编号', '文章标题', '订单金额', '创建时间', '录制人', '状态'] };

    4 html 中

     <div class="myadd-button" ng-csv="getArray()"
                             filename="{{ filename }}.csv"
                             csv-header="getHeader()"
                             lazy-load="true">
                            <span>导出数据</span>
                        </div>
  • 相关阅读:
    什么是webview
    juqery.fn.extend和jquery.extend
    LeetCode
    5. Longest Palindromic Substring
    42. Trapping Rain Water
    11. Container With Most Water
    621. Task Scheduler
    49. Group Anagrams
    739. Daily Temperatures
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/richard1015/p/7270022.html
Copyright © 2011-2022 走看看