此为简单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. python爬虫入门urllib库的使用

    urllib库的使用,非常简单. import urllib2 response = urllib2.urlopen("http://www.baidu.com") print r ...

  2. 10个常见的JavaScript BUG

    译者按: 安全起见,在开发中我基本不用==. 原文: 10 COMMON JAVASCRIPT BUGS AND HOW TO AVOID THEM 译者: Fundebug 为了保证可读性,本文采用 ...

  3. IE浏览器的ActiveXObject对象以及FileSystemobject的应用扩展(完成)

    ActiveXObject 对象 启用和返回对自动化对象的引用.此对象仅用于实例化自动化对象,且此对象没有成员. 警告:此对象为 Microsoft 扩展,仅在 Internet Explorer 中 ...

  4. 前端整理——css部分

    (1)盒模型(普通盒模型.怪异盒模型) 1.元素的content(内容).padding(内边距).border(边框).margin(外边距)构成了CSS盒模型 2.IE盒模型和W3C盒模型 1)I ...

  5. jQuery 简单案例

    案例一:全选.反选.取消实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. 照葫芦画瓢系列之Java --- eclipse下使用maven创建Struts 2项目

    一.创建Maven项目 http://www.cnblogs.com/zhanqun/p/8425571.html 二.添加struts2核心依赖包以及其他依赖项 打开pom.xm配置界面 点击Add ...

  7. JNI NDK (AndroidStudio+CMake )实现C C++调用Java代码流程

    JNI/NDK Java调用C/C++前言  通过第三篇文章讲解在实际的开发过程中Java层调用C/C++层的处理流程.其实我们在很大的业务里也需要C/C+ +层去调用Java层,这两层之间的相互调用 ...

  8. Android dp、dip、dpi、px、sp简介及相关换算，及其应用实例

    屏幕分辨率:在x y轴上的像素点数.单位是px,1px=1个像素点.一般以    纵向像素×横向像素    表示,如1920*1080dpi--------------------------每英寸上 ...

  9. .NET Core 2.0

    下载 Visual Studio 2017 version 15.3 下载 .NET Core 2.0 下载 Visual Studio for Mac 微软今天发布了.NET Core 2.0 版本 ...

  10. Scala链式编程内幕

    package big.data.analyse.scala /** * 链式编程原理 * Created by zhen on 2018/12/16. */ class Computer{def c ...