此为简单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. VM扩展磁盘大小

    1.通过扩展磁盘的方法增大磁盘大小 2.然后开启Linux 此时查看磁盘  df -h 并没有增加,使用 fdisk -l 查看发现已经扩展 使用 root 用户,进入到 ~ 家目录下面. 3.使用 ...

  2. CodeMirror 使用

    codemirror是一款在线代码编辑器,官网:https://codemirror.net/doc/manual.html#overview 使用说明 第一步 安装: npm install cod ...

  3. localStorage封装借口store.js的使用

    localstorage 是 HTML5 提供的在客户端存储数据的新方法,主要作用是将数据保存在客户端中,并且数据是永久保存的,除非人为干预删除. localstorage 的局限 1.只有版本较高的 ...

  4. linux mail操作

    本操作系统邮件由来,crontab定时任务执行推送产生. 1.查看有多少封邮件 & file 2.我们直接键入23935来访问这封mail,看看是否是我们所需要的最新邮件. 3. 退出邮件查看 ...

  5. chorme type=file 延迟5-8秒

    原文地址:http://www.piaoyi.org/computer/Google-Chrome-input-file-delay-3-5.html 原先写法: <button type=&q ...

  6. UOJ#310. 【UNR #2】黎明前的巧克力(FWT)

    题意 题目链接 Sol 挂一个讲的看起来比较好的链接 然鹅我最后一步还是没看懂qwq.. 坐等SovietPower大佬发博客 #include<bits/stdc++.h> using ...

  7. C# 利用ReportViewer生成报表

    本文主要是利用微软自带的控件ReportViewer进行报表设计的小例子,仅供学习分享使用,如有不足之处,还请指正. 涉及知识点: ReportViewer :位于Microsoft.Reportin ...

  8. Android--小游戏

    GitHub:https://github.com/vinieo/game 功能描述   “猜小球”是一个简单的愉悦身心的小游戏,它的功能结构如图a-1所示. 构建开发环境 在开发本游戏时,首先需要下 ...

  9. 5步告诉你QQ音乐的完美音质是怎么来的，播放器的秘密都在这里

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由QQ音乐技术团队发表于云+社区专栏 一.问题背景与分析 不久前,团队发现其Android平台App在播放MV视频<凤凰花开的路口 ...

  10. go 利用orm简单实现接口分布式锁

    在开发中有些敏感接口,例如用户余额提现接口,需要考虑在并发情况下接口是否会发生问题.如果用户将自己的多条提现请求同时发送到服务器,代码能否扛得住呢?一旦没做锁,那么就真的会给用户多次提现,给公司带来损 ...