最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

AngularJs导出数据到Excel的示例代码

来源:动视网 责编:小采 时间:2020-11-27 22:32:51
文档

AngularJs导出数据到Excel的示例代码

AngularJs导出数据到Excel的示例代码:公司一个新的需求导出Exce表格,研究了一下,最后终于实现,分享给大家。 1 使用FileSaver 第一次采用FileSaver.js 由于刚开始导致导出一片空白,还只能抓取网页里面的表格地址:https://github.com/eligrey/FileSaver.js HTML &
推荐度:
导读AngularJs导出数据到Excel的示例代码:公司一个新的需求导出Exce表格,研究了一下,最后终于实现,分享给大家。 1 使用FileSaver 第一次采用FileSaver.js 由于刚开始导致导出一片空白,还只能抓取网页里面的表格地址:https://github.com/eligrey/FileSaver.js HTML &


公司一个新的需求导出Exce表格,研究了一下,最后终于实现,分享给大家。

1 使用FileSaver

第一次采用FileSaver.js 由于刚开始导致导出一片空白,还只能抓取网页里面的表格地址:https://github.com/eligrey/FileSaver.js

HTML

<div id="exportable">
 <table width="100%">
 <thead>
 <tr>
 <th>Name</th>
 <th>Email</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>小明</td>
 <td>dsds@163.com</td>
 </tr>
 </tbody>
 </table>
</div>

js部分

var blob = new Blob([document.getElementById('exportable').innerHTML], {
 type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
 });
 saveAs(blob, "日记账.xls");
};

2 使用 alasql

使用alasql的好处就是可以在数据层面去组织结构

官网地址:http://alasql.org/

js部分

\\ angular 需要导入xlsx.core.min.js alasql.min.js
\\ 文件结构 
 var arr = [
 {
 '收入':1,
 '支出':2,
 '结存':3
 },
 {
 '收入':4,
 '支出':5,
 '结存':6
 }
 ]

\\ 生成 excel 文件
alasql('SELECT * INTO XLSX("日记账.xlsx",{headers:true}) FROM ?',[arr]);

我优化的版本

// 导出excel

 $scope.exportToExcel=function(){
 var data = angular.copy($scope.pageData.list)
 var arr = [];
 var type = null;
 var amountIN = 0;
 var amountOUT = 0;
 angular.forEach(data,function (item) {
 // 兑付情况
 if(item.isHappened){
 type = '未兑付'
 }else{
 type = '已兑付'
 }
 // 收入
 if(item.itemModel=='INCOME'){
 amountIN = item.amount
 }
 // 支出
 if(item.itemModel=='OUTCOME'){
 amountOUT = item.amount
 }
 arr.push({
 '兑付情况':type,
 '合同':item.keyId,
 '收付日期':$filter('date')(item.updateTime,'yyyy-MM-dd'),
 '科目':item.itemType.value,
 '收入':$filter('number')(amountIN,2),
 '支出':$filter('number')(amountOUT,2),
 '结存':$filter('number')(item.balance,2)
 })
 })
 if(arr.length < 1){
 ToasterTool.error('暂无数据,导出失败!');
 }else{
 // alasql('SELECT * INTO XLSX("日记账.xlsx",{headers:true}) FROM ?',[arr]);
 
 alasql.promise('SELECT * INTO XLSX("日记账-'+ DateTool.format(new Date(),'yyyy-MM-dd HH:mm:ss') + "-"+ $scope.loginUser.userName +'.xlsx",{headers:true}) FROM ?',[arr])
 .then(function (data) {
 if(data == 1){
 $timeout(function(){
 ToasterTool.success('数据导出成功!')
 })

 }
 })
 }
 }

文档

AngularJs导出数据到Excel的示例代码

AngularJs导出数据到Excel的示例代码:公司一个新的需求导出Exce表格,研究了一下,最后终于实现,分享给大家。 1 使用FileSaver 第一次采用FileSaver.js 由于刚开始导致导出一片空白,还只能抓取网页里面的表格地址:https://github.com/eligrey/FileSaver.js HTML &
推荐度:
标签: 表格 导出 excel
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top