今天分享一下如何在前端应用中导出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");
}
如此即可导出。