js导出excel

今天分享一下如何在前端应用中导出excel。

如果你是用angular，那么可以使用ng-csv，ng-csv导出的是csv文件，并不是.xls等常规excel格式的文件，但是csv也是可以通过excel打开的，属于曲线救国吧- -

地址：http://ngmodules.org/modules/ng-csv

使用方法：

1.将ng-csv.min.js引用到index.html中，并且还要同时引入angular-sanitize.min.js（ng 安全模块，应对XSS）

2.引入ngCsv组件，

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

3.在需要使用的地方加上ng-csv指令，比如：

<button class="btn btn-default"
ng-csv="getArray"
csv-header="getHeader()"
filename="test.csv">
导出CSV</button>

此时在js中应有对应的getArray对象和getHeader()方法：

$scope.getArray = [{a: 1, b:2}, {a:3, b:4}];
$scope.getHeader = function () {return ["A", "B"]};

如此点击button即可导出。

如果你不是使用的angular，那么可以使用FileSaver.js，当然FileSaver在angular应用里也是通用的。

地址：https://github.com/eligrey/FileSaver.js/

事实上，从FileSaver这个名字可以看出，这个插件并不仅仅可以用来导出excel，它是能导出file的，具体的看上面github便知，我这边说下导出excel。

我们只要在H5页面里有一个table，并且这个table在id为exportable的div下：

<div id="exportable">
<table>
<thead >
<tr>
<th class="th_style">部门</th>
<th class="th_style">姓名</th>
<th class="th_style">身份证</th>
</tr>
</thead>
<tbody>
<tr>
<td>department</td>
<td>name</td>
<td>nationalid</td>
</tr>
</tbody>
</table>
</div>

对应的导出按钮的click事件：

$scope.output=function () {
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.ms-excel;charset=utf-8"
});
saveAs(blob, "Report.xls");
}

如此即可导出。