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>
  • 相关阅读:
    POJ3253Fence Repair(优先队列或单调队列)
    POJ3630Phone List(字典树)
    HDU1896Stones(优先队列)
    POJ3468 A Simple Problem with Integers(线段树延时标记)
    HDU3535AreYouBusy(分组背包)
    C++ 学习涨姿势汇总
    [C++] std::vector 使用
    Cocos2dx-3.2 引擎学习(四)之CCScheduler
    Cocos2dx-3.2 引擎学习(三)之AssetsManager
    Cocos2dx-3.2 引擎学习(二)之Director
  • 原文地址:https://www.cnblogs.com/richard1015/p/7270022.html
Copyright © 2011-2022 走看看