此为简单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. CSS3布局之box-flex的使用

    语法: box-flex:<number> 其中number取值:使用浮点数指定对象所分配其父元素剩余空间的比例.设置或检索伸缩盒对象的子元素如何分配其剩余空间.(伸缩盒最老版本) htm ...

  2. mysql中需要注意的编码问题

  3. iOS----------开发中常用的宏有那些

    OC对象判断是否为空? 字符串是否为空 #define kStringIsEmpty(str) ([str isKindOfClass:[NSNull class]] || str == nil || ...

  4. JMeter 后置处理器之正则表达式提取器详解

    后置处理器之正则表达式提取器详解   by:授客 QQ:1033553122 1. 添加正则表达式提取器 右键线程组->添加->后置处理器->正则表达式提取器 2. 提取器配置介绍 ...

  5. Android为TV端助力 自定义动画

    android自定义动画注意是继承Animation,重写里面的initialize和applyTransformation,在initialize方法做一些初始化的工作,在applyTransfor ...

  6. cordov vue项目中调用手机原生api

    cordova不仅可以把vue项目打包成app,还可以让vue借助cordova调用手机原生的api 比如拍照 比如图片上传 比如定位 比如扫描二维码 比如支付等等 Vue Cordova教程-Vue ...

  7. C#生成唯一订单号

    今天系统出了一个问题,发现生成的订单号存在重复的情况了,这是要命的bug,不马上解决,就会有投诉了 经过改进后的代码我先简单的放一下,后面在慢慢的写清楚整个流程 string key = " ...

  8. button改变某div内文字内容的显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. sh命令

    sh或是执行脚本,或是切换到sh这个bash里,默认的shell是bash,你可以试试tcsh啊,csh啊,ksh,zsh什么的,看看别的shell是什么样子的.当然,linux中sh是链接到bash ...

  10. [20190226]删除tab$记录的恢复6.txt

    [20190226]删除tab$记录的恢复6.txt --//春节前几天做了删除tan$记录的测试,链接:http://blog.itpub.net/267265/viewspace-2565245/ ...