ng-csv教程-----使用angularJs导成csv文件

2017-01-20  本文已影响1675人  木槿惜年2013

一、简介
  可将数组和对象转化成可下载的csv文件
二、依赖
  (1) angularJs(从1开始的任何版本都可以)
  (2)angular-sanitize.js(从1开始的任何版本都可以)
三、使用
  (1)在你的主文件中引入ng-csv.min.js。(请确保你已经引入了angular-sanitize.js)
  (2)将ngCsv设置为你模块中的依赖

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

(3)将ng-csv指令添加到你想添加的元素上,例如:

<button type="button" ng-csv="getArray" filename="test.csv">Export</button>

四、ngCsv属性
  (1)ng-csv:数据数组,可以是表达式、一个值或者是promise
  (2)filename:将存储在用户计算机上的文件名
  (3)csv-header:如果提供,将使用此属性创建标题行

<button type="button" ng-csv="getArray" csv-header="['Field A', 'Field B', 'Field C']" filename="test.csv">Export</button>

(4)csv-column-order:定义创建CSV主体时要设置的列顺序(可以根据csv-headers) - 当您有一个对象数组时使用它。
  (5)field-separator:定义字段分隔符字符(默认为,)
  (6)decimal-separator:定义小数分隔符(默认为.)
  (7)text-delimiter:如果提供,将使用此字符“转义”字段,否则将使用双引号作为默认值
  (8)quote-strings:如果提供,将强制转义每个字符串字段
  (9)lazy-load:如果定义并设置为true,ngCsv将仅根据需要生成数据字符串。 有关更多详细信息,请参阅lazy_load示例
  (10)add-bom:添加字节顺序标记,如果在任何Windows应用程序上打开文件时遇到意外的字符,请使用此选项
  (11)charset:定义可下载的Csv文件的字符集,默认值为“utf-8”
  (12)csv-label:定义是否使用键作为csv列值(默认值为false)
五、示例
  (1)你可以在这里查看这个实例: https://asafdav.github.io/ng-csv/example/
  (2)使用promises的延迟加载示例,请参阅此示例: https://asafdav.github.io/ng-csv/example/lazy_load.html
五、支持的浏览器

支持的浏览器.png
上一篇下一篇

猜你喜欢

热点阅读