【angularjs】pc端使用angular搭建项目，实现导出excel功能

此为简单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>
View Code
复制代码

 

 

 

 

 

 

 

 

 

 

作者：smile.轉角

QQ：493177502

posted on   smile轉角  阅读(470)  评论(0)  编辑  收藏  举报

编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

导航

统计

点击右上角即可分享
微信分享提示