此为简单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. mysql启动事件

    1.查看时间是否开启 SHOW VARIABLES LIKE 'event_scheduler' 若是查看结果为OFF,的话开启ON 2.设置事件开启 SET GLOBAL event_schedul ...

  2. could not read Username for 'https://github.com': No error

    用idea往github上push代码的时候,突然的不能用了. 报could not read Username for 'https://github.com': No error错误. 原因不明. ...

  3. [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  4. call，apply，bind的用法与区别

    1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...

  5. Spider-four

    计算机速度比较: CPU -> 寄存器 -> 缓存L1/L2/L3 -> 内存 -> 硬盘 -> 网卡 -> BIOS LMAP: Linux + MySQL + ...

  6. 【读书笔记】iOS-库

    一,OS X和iOS自带一些标准的C程序库和操作系统相关的特殊性.在MAC和iOS的世界里,静态库采用.a扩展名(静态对象代码库存档),动态加载库采用.dylib扩展名.如果开发人员来自于Linux世 ...

  7. ABP问题速查表

    如果你领导要让你一夜之间掌握ABP,并且用ABP撸一个项目出来,你很可能很快速的过了一遍ABP文档就马上动手干活了.那么这篇文章就很适合你. 这篇文章列出了很多ABP新手问的问题和解答.注:有些同学问 ...

  8. 13.Odoo产品分析 (二) – 商业板块(6) –采购(3)

    接上一篇  查看Odoo产品分析系列--目录 接上一篇Odoo产品分析 (二) – 商业板块(6) –采购(2) 7. 仓库 仓库是在安装采购管理模块时出现的菜单.用于管理工厂库存,包括已经在手的货物 ...

  9. Spring Boot 特性以及代码模板实例

    SpringBoot工程 参数解析 HTTP Method Request / Response / Session Error/重定向 Logger IoC AOP/Aspect   1:Sprin ...

  10. MSSQL coalesce系统函数简介

    转自:http://www.maomao365.com/?p=4390 一.coalesce函数简介 coalesce 系统函数,比ISNULL更强大,更方便的系统函数,coalesce可以接收多个参 ...