JS导出Excel

本文介绍两种前端导出Excel的方法:一是使用ng-csv适用于Angular项目;二是利用FileSaver.js,适合所有前端项目,包括Angular。通过示例代码详细说明了如何实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

如此即可导出。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值