此为简单demo。

<!DOCTYPE html>

<html ng-app="myApp">

    <head>

        <meta charset="UTF-8">

        <title>导出excel</title>

        <script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var app = angular.module('myApp',[]);

            app.controller('MyCtrl',function($timeout,$scope){

                // 表格数据

                $scope.items = [

                    {

                        "Name": "ANC101",

                        "Date": "10/02/2014",

                        "Terms": ["samsung", "nokia", "apple"]

                    },

                    {

                        "Name": "ABC102",

                        "Date": "10/02/2014",

                        "Terms": ["motrolla", "nokia", "iPhone"]

                    }

                ];

                // 导出excel

                  $scope.exportData = function () {

                      var bFlag = 0;

                      angular.forEach($scope.items,function(value,index){

                          console.log(index);

                          if(value.selected){

                              bFlag = 1;

                          }

                      });

                      if(bFlag){

                          var blob = new Blob([document.getElementById('exportable').innerHTML], {

                            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"

                        });

                        saveAs(blob, "Report.xls");

                      }

                };

            });

        </script>

    </head>

    <body>

        <div ng-controller="MyCtrl">

            <button ng-click="exportData()" >Export</button>

            <br />

            <table width="100%">

                <thead>

                    <tr>

                        <th></th>

                        <th>Name</th>

                        <th>Date</th>

                        <th>Terms</th>

                    </tr>

                </thead>

                <tbody>

                    <tr ng-repeat="item in items">

                        <td><input type="checkbox" ng-model="item.selected" /></td>

                        <td>{{item.Name}}</td>

                        <td>{{item.Date}}</td>

                        <td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>

                    </tr>

                </tbody>

            </table>

            <div id="exportable" style="display:none">

                <table width="100%" >

                    <thead>

                        <tr>

                            <th>Name</th>

                            <th>Date</th>

                            <th>Terms</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr ng-repeat="item in items|filter:{selected: true}">

                            <td align="center">{{item.Name}}</td>

                            <td align="center">{{item.Date}}</td>

                            <td align="center"><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </body>

</html>

作者：smile.轉角

QQ：493177502

【angularjs】pc端使用angular搭建项目，实现导出excel功能的更多相关文章

  1. spring mvc项目中导出excel表格简单实现

    查阅了一些资料,才整理出spring mvc 项目导出excel表格的实现,其实很是简单,小计一下,方便以后查阅,也希望帮助有需要的朋友. 1.导入所需要依赖(Jar包).我使用的是maven,所以坐 ...

  2. Java web项目JXl导出excel，（从eclipse上移动到tomact服务器上，之路径更改）

    我用的是jxl导出excel,比较简单,最开始我是固定路径不能选择,很局限,后来改了,而且固定路径当把项目放在服务器上时,路径不可行. 在网上各位大神的帮助成功设置响应头,并且可选保存路径. 1.前端 ...

  3. 【angularjs】使用angular搭建项目，pc端实现网页中的内容不可复制

    实现目标:不可复制页面内容 js: <script language="javascript"> if (typeof(document.onselectstart) ...

  4. 【angularjs】使用ionic+angular 搭建移动端项目，字体适配

    解析: 首先,rem是以html为基准. 一般的,各大主流浏览器的font-size默认值为16px,此时1rem=16px.如果此时将rem与px进行换算很麻烦,比如0.75rem=12px. 为了 ...

  5. 【angularjs】使用angular搭建项目，实现隔行换色

    描叙:使用ng-class实现每隔3行换色 代码: <!DOCTYPE html> <html ng-app="myApp"> <head> & ...

  6. 【angularjs】使用angular搭建项目，获取dom元素

    方法一:需要引入jq,否则会报angularJS1 Error: [jqLite:nosel](不建议使用) <div id="testID" class="tes ...

  7. 【angularjs】使用angular搭建项目，图片懒加载资料

    demo: <ion-view view-title="{{chat.name}}"> <style type="text/css"> ...

  8. 【angularjs】使用angular搭建项目，滚动距离

    常用方法 滚动到顶部:$ionicScrollDelegate.scrollTop();或者$ionicScrollDelegate.$getByHandle('视图句柄').scrollTop(); ...

  9. cordova环境搭建，搭建项目，以及拍照功能的实现

    一.配置环境 1.配置java环境: 下载对应系统环境的jdk:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-13 ...

随机推荐

  1. 7.通用程序设计_EJ

    第45条: 将局部变量的作用域最小化 该条目与第13条(使类和成员的可访问性最小)本质上是类似的.要使局部变量的作用域最小化,最有利的方法就是在第一次使用它的地方声明.在每个局部变量的声明处都应该包含 ...

  2. 常见js面试题

    包含内容: Array indexOf(). 数组扁平化 isArray() 数组的去重 Object.is() Array.filter 用一行代码实现数组扁平化? JavaScript isArr ...

  3. django（python manage.py imgrate）同步数据库出错后的解决办法

    问题 很多情况下,因为app的models.py的文件内容有误,但是通过python   manage.py    check检查不出来时,当执行python   manage.py    migra ...

  4. 在php中使用对称加密DES3，开发银行卡绑定，实名验证……

    对称加密:对称加密是一种数据加密算法,对一组数据的加密和解密都使用一样的密钥(key),可以有效保护金融数据,常见的对称加密有DES,3DES,AES.RC2.RC4.RC5. DES3: 对DES算 ...

  5. loadrunner 脚本优化-事务时间简介

    脚本优化-事务时间简介 by:授客 QQ:1033553122 事务概念 事务是指用户在客户端做一种或多种业务所需要的操作集(actions),通过事务开始和结束函数可以标记完成该业务所需要的操作内容 ...

  6. java 返回某一天的周日和现在这一周的周日

    import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Calendar;import j ...

  7. sql-server的添加数据库文件（日志数据）以及收缩数据库文件（日志数据）

    环境: SSMS sql-server2016 一.为数据库添加数据文件 添加日志数据文件 以下是添加数据文件和日志文件的代码 ALTER DATABASE [joinbest] ADD FILE ( ...

  8. Greenplum启动失败Error occurred: non-zero rc: 1的修复

    某日开发反馈测试环境的集群启动失败 报错内容如下: [gpadmin@hadoop-test2:/root]$ gpstart :::: gpstart:hadoop-test2:gpadmin-[I ...

  9. Mysql内置优化工具show profiles

    一.概述: Mysql的explain工具目前还没有Oracle的explain plan工具那么强大,但是结合show profiles工具可以实现相似的效果.show profiles语句用于在当 ...

  10. List删除

    使用for循环,倒序删除: ; i >= ; i--) { var item = list[i]; ") { list.Remove(item); } }