前言
对于前端开发者来说，导出 CSV 数据是一项很常见的需求。我们可以使用 angular2-csv 这个 npm 包来实现该需求。但是，如果我们需要为 CSV 表格添加表头，那该怎么办呢？
这就是本文所介绍的 angular2-csv-headers 包的作用：为导出的 CSV 表格添加表头，以及一些额外的功能。本文将详细介绍该包的安装、使用方法和示例代码，让大家可以简单快速地实现 CSV 数据的导出。
安装
使用 npm 安装 angular2-csv-headers 包：
npm install angular2-csv-headers --save
使用方法
引入模块
在需要使用的模块中导入 CSV_HEADER_DIRECTIVES：
import { CSV_HEADER_DIRECTIVES } from 'angular2-csv-headers';并将其加入 declarations 中：
@NgModule({
declarations: [
CSV_HEADER_DIRECTIVES,
// ...
],
// ...
})
export class AppModule { }导出 CSV
通过指令 export-csv 可以导出带有表头的 CSV 数据。table 元素的 headers 属性会被作为表头。
-- -------------------- ---- -------
------ ------- --------------- ------- ----------
----
-----------
-------------
--------------
-----
----
----------
-------------
--------------
-----
----
----------
-------------
--------------
-----
--------
------- ---------- ----- ----------------------------- --- ---- ----------------该片段代码中，table 元素的 headers 属性设置为列的表头名称，button 元素添加 export-csv 指令，并将需要导出的表格名称传入 [tableName] 属性。
更多配置
导出文件名称可在 button 元素中通过 [fileName] 属性指定：
<button export-csv #btn1 [tableName]="'table1'" [fileName]="'my-csv-file'">Export CSV With Headers</button>
使用 separator 属性可指定列分隔符：
<button export-csv #btn1 [tableName]="'table1'" [separator]="'\t'">Export CSV With Headers</button>
使用 fieldSeparator 属性可指定列内部分隔符：
-- -------------------- ---- -------
------ ------- -------------- ------ ----------
----
------- ---------
--------------
-----
----
------ ---------
--------------
-----
----
------ ---------
--------------
-----
--------
------- ---------- ----- ---------------------- ------------------------------ --- ---- ----------------最后，点击 button 按钮即可导出 CSV 文件（如果表格为空，则不会生成文件）。
示例代码
-- -------------------- ---- -------
------ ------- --------------- ------- ----------
----
-----------
-------------
--------------
-----
----
----------
-------------
--------------
-----
----
----------
-------------
--------------
-----
--------
------- ---------- ----- ---------------------- -------------------------- ------------------------- --- ---- ----------------总结
angular2-csv-headers 是一个非常方便的 npm 包，可以让我们轻松地为导出的 CSV 数据添加表头。本文介绍了该包的安装、使用方法和示例代码，希望能对大家的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66d2