Angular JS - Javascript 개체를 XLS 파일로 내보내는 방법? 사실

Question

, 난 그냥 .XLS로 해당 개체를 내보내거나 믿을수이 같은 접근 방식을 많이 사용 .csv로하려면, 내 컨트롤러에서 개체를했습니다 :

HTML을

<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript" /> 
<div ng-controller="myCtrl"> 
    <button ng-click="exportData()">Export</button> 
    <br /> 
    <div id="exportable"> 
    <table width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Email</th> 
       <th>DoB</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="item in items"> 
       <td>{{item.name}}</td> 
       <td>{{item.email}}</td> 
       <td>{{item.dob | date:'MM/dd/yy'}}</td> 
      </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

자바 스크립트

function myCtrl($scope) { 
    $scope.exportData = function() { 
     var blob = new Blob([document.getElementById('exportable').innerHTML], { 
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 
     }); 
     saveAs(blob, "Report.xls"); 
    }; 

    $scope.items = [{ 
     name: "John Smith", 
     email: "j.smith@example.com", 
     dob: "1985-10-10" 
    }, { 
     name: "Jane Smith", 
     email: "jane.smith@example.com", 
     dob: "1988-12-22" 
    }, { 
     name: "Jan Smith", 
     email: "jan.smith@example.com", 
     dob: "2010-01-02" 
    }, { 
     name: "Jake Smith", 
     email: "jake.smith@exmaple.com", 
     dob: "2009-03-21" 
    }, { 
     name: "Josh Smith", 
     email: "josh@example.com", 
     dob: "2011-12-12" 
    }, { 
     name: "Jessie Smith", 
     email: "jess@example.com", 
     dob: "2004-10-12" 
    }] 
} 

하지만이 거기 매겨진 tables.is와 직접 (이 예를 들어 $의 scope.item에서) 개체를 내보낼 수있는 방법 파일에 작동 (XLS , CSV)?

Answer 1

예, 당신이 XLSX.js 라이브러리 Alasql 자바 스크립트 라이브러리를 당신에게 데이터를 저장할 수 있습니다.

먼저 :

• alasql.min.js
• xlsx.core.min.js

둘째 : 대체 exportData이 당신의 페이지에 자바 스크립트 라이브러리를 포함 다음은 예입니다() 함수는 다음과 같습니다.

$scope.exportData = function() { 
     alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]); 
    }; 

세 번째 : CSV 파일의 경우 : 단순히 CSV() 함수를 사용하십시오.

alasql('SELECT * INTO CSV("john.csv",{headers:true, separator:";"}) FROM ?',[$scope.items]); 

this example in jsFiddle으로 재생할 수 있습니다.

Answer 2

CSV 파일에 만족하면 ngCsv 모듈을 사용하는 것이 좋습니다. DOM에서 요소를로드하지는 않지만 배열을 직접 내 보냅니다. 여기에서 ngCsv 샘플을 볼 수 있습니다.

HTML :

<h2>Export {{sample}}</h2> 
    <div> 
     <button type="button" ng-csv="getArray" filename="test.csv">Export</button> 
</div> 

과 JS :

angular.module('csv', ['ngCsv']); 

function Main($scope) { 
    $scope.sample = "Sample"; 
    $scope.getArray = [{a: 1, b:2}, {a:3, b:4}];        
}