angularjs를 사용하여 xls로 내보내기
저는 angular js app을 하고 있는데 angular js를 사용하여 Xls로 데이터를 내보내야 하는 상황에 빠졌습니다.저는 내보내기 기능을 위해 인터넷에서 많이 검색하거나 angular js 라이브러리를 검색해서 그렇게 하거나 적어도 내보내기 방법을 알 수 있습니다.여기에 표시할 코드나 작업이 없습니다.
오브젝트 배열인 데이터가 있는데 테이블 내의 UI에서 반복하고 있습니다.내 백엔드는 node.js이고 프런트엔드는 angular js입니다.
문제는 서버의 데이터를 가지고 있고 UI를 사용하고 있는데 어떻게 동일한 데이터를 사용하여 angular js를 사용하여 Xls로 내보낼 수 있는가 하는 것입니다.데이터를 추출하여 내보내기 위해 백엔드에서 다시 호출을 하고 싶지 않습니다.
기존 테이블에서는 체크박스(임의의 행 수 또는 모든 행)를 선택하여 데이터를 Xls로 추출할 수 있습니다.
node.js에서는 Excel이라는 이름의 노드 모듈을 사용하고 있으며 노드 모듈 사이트에서 사용할 수 있습니다.
데이터는 다음과 같습니다.
"data": [
{
"Name": "ANC101",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia": "apple"]
},{
"Name": "ABC102",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia": "iPhone"]
}
]
나는 angularjs나 angularjs 라이브러리를 사용하여 해결책을 원한다.
하여 Angular v-line을 생성하는 .<table>FileSaver.js를 사용하여 사용자가 다운로드할 수 있는 .xls 파일로 테이블을 출력합니다.Excel은 HTML 테이블을 스프레드시트로 열 수 있습니다.
<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>
호출 내보내기:
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report.xls");
};
데모: http://jsfiddle.net/TheSharpieOne/XNVj3/1/
체크박스 기능과 질문 데이터가 포함된 데모를 업데이트했습니다.데모: http://jsfiddle.net/TheSharpieOne/XNVj3/3/
XLSX.js 라이브러리와 연동하여 Angular.js 데이터를 쉽게 내보낼 수 있는 Alasql JavaScript 라이브러리를 사용할 수 있습니다.다음으로 exportData() 함수를 가진 컨트롤러의 예를 나타냅니다.
function myCtrl($scope) {
$scope.exportData = function () {
alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]);
};
$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"
}];
}
jsFiddle의 이 예에 대한 완전한 HTML 및 JavaScript 코드를 참조하십시오.
UPDATED 색칠 셀의 다른 예.
또, 다음의 2개의 라이브러리를 포함할 필요가 있습니다.
비슷한 것이 필요했을 때 ng-csv와 다른 솔루션으로는 전혀 도움이 되지 않았습니다.제 데이터는 $scope로 되어있었고 그것을 보여주는 표가 없었습니다.그래서 Sheet.js(xslsx.js)와 FileSaver.js를 사용하여 Excel로 데이터를 내보내는 지침을 작성했습니다.
예를 들어, 데이터는 다음과 같습니다.
$scope.jsonToExport = [
{
"col1data": "1",
"col2data": "Fight Club",
"col3data": "Brad Pitt"
},
{
"col1data": "2",
"col2data": "Matrix Series",
"col3data": "Keanu Reeves"
},
{
"col1data": "3",
"col2data": "V for Vendetta",
"col3data": "Hugo Weaving"
}
];
컨트롤러의 지시에 따라 어레이 어레이로 데이터를 준비해야 했습니다.
$scope.exportData = [];
// Headers:
$scope.exportData.push(["#", "Movie", "Actor"]);
// Data:
angular.forEach($scope.jsonToExport, function(value, key) {
$scope.exportData.push([value.col1data, value.col2data, value.col3data]);
});
마지막으로 템플릿에 지시문을 추가합니다.버튼이 표시됩니다.(바이올린 참조).
<div excel-export export-data="exportData" file-name="{{fileName}}"></div>
데이터를 ng-grid에 로드하는 경우 CSV 내보내기 플러그인을 사용할 수 있습니다.플러그인은 href 태그 내에 그리드 데이터를 csv로 포함하는 버튼을 만듭니다.
http://angular-ui.github.io/ng-grid/
https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-csv-export.js
라이브러리 이름이 변경됨에 따라 링크 업데이트:
Github 링크: https://github.com/angular-ui/ui-grid
라이브러리 페이지: http://ui-grid.info/
csv export에 관한 문서:http://ui-grid.info/docs/ #/syslog/syslog_data
이 디렉티브(ng-csv)를 사용하여 파일을 csv로 다운로드하면 Excel이 이해할 수 있습니다.
http://ngmodules.org/modules/ng-csv
이 코드를 조정할 수 있습니다(업데이트된 링크).
http://jsfiddle.net/Sourabh_/5ups6z84/2/
XMLSS인 것 같습니다(파일을 열기 전에 경고합니다.파일을 열도록 선택하면 파일이 올바르게 열립니다.
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
커스터마이즈된 파일명으로 아래를 시험해당 파일명은 다음과 같습니다.
$scope.exportData= function(){
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
var table = document.getElementById("searchResult");
var filters = $('.ng-table-filters').remove();
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
$('.ng-table-sort-header').after(filters) ;
var url = uri + base64(format(template, ctx));
var a = document.createElement('a');
a.href = url;
a.download = 'Exported_Table.xls';
a.click();
};
$scope.ExportExcel= function () { //function define in html tag
//export to excel file
var tab_text = '<table border="1px" style="font-size:20px" ">';
var textRange;
var j = 0;
var tab = document.getElementById('TableExcel'); // id of table
var lines = tab.rows.length;
// the first headline of the table
if (lines > 0) {
tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
}
// table data lines, loop starting from 1
for (j = 1 ; j < lines; j++) {
tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>";
}
tab_text = tab_text + "</table>";
tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
// console.log(tab_text); // aktivate so see the result (press F12 in browser)
var fileName = 'report.xls'
var exceldata = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" })
if (window.navigator.msSaveBlob) { // IE 10+
window.navigator.msSaveOrOpenBlob(exceldata, fileName);
//$scope.DataNullEventDetails = true;
} else {
var link = document.createElement('a'); //create link download file
link.href = window.URL.createObjectURL(exceldata); // set url for link download
link.setAttribute('download', fileName); //set attribute for link created
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
//html of button
이 문제가 발생하여 HTML 테이블을 CSV 파일로 내보내기 위한 툴을 만들었습니다.FileSaver.js의 문제는 이 툴이 html 포맷으로 테이블을 잡는다는 것입니다.이 때문에 일부 사람들은 파일을 엑셀이나 구글에서 열 수 없습니다.js 파일을 내보내고 함수를 호출하기만 하면 됩니다.같은 문제가 있는 경우 github url https://github.com/snake404/tableToCSV 입니다.
angularjs 컨트롤러에 내보낼 JSON 파일이 필요하며 HTML 파일에서 호출할 수 있을 것입니다.둘 다 살펴보도록 하겠습니다.그러나 시작하기 전에 먼저 각진 라이브러리에 두 개의 파일을 추가해야 합니다.이 2개의 파일은 json-export-excel.js와 filesaver.js입니다.또한 각도 모듈에 종속성을 포함시켜야 합니다.따라서 처음 두 단계는 다음과 같이 요약할 수 있습니다.
각도 라이브러리에 json-export.js 및 filesaver.js를 추가합니다.
각도 모듈에 ngJsonExportExcel 종속성을 포함합니다.
var myapp = angular.module('myapp', ['ngJsonExportExcel'])
필요한 파일이 포함되었으므로 HTML 파일 및 컨트롤러에서 수행해야 하는 변경사항으로 넘어갈 수 있습니다.컨트롤러에 수동으로 또는 백엔드에 콜을 발신하여 json이 작성되고 있는 것을 전제로 하고 있습니다.
HTML:
Current Page as Excel
All Pages as Excel
제가 작업한 어플리케이션에서는 백엔드에서 페이지화된 결과를 가져왔습니다.그래서 나는 엑셀로 수출하기 위해 두 가지 옵션을 가지고 있었다.하나는 현재 페이지용이고 다른 하나는 모든 데이터용입니다.사용자가 옵션을 선택하면 콜은 json(목록)을 준비하는 컨트롤러로 전송됩니다.목록의 각 개체는 Excel에서 행을 형성합니다.
자세한 것은, https://www.oodlestechnologies.com/blogs/Export-to-excel-using-AngularJS 를 참조해 주세요.
면책사항:저는 우들 기술을 위해 일합니다.
언급URL : https://stackoverflow.com/questions/21680768/export-to-xls-using-angularjs
'programing' 카테고리의 다른 글
| Android - JSON Array 및 JSON 객체 생성 (0) | 2023.03.19 |
|---|---|
| jQuery의 .on() 메서드가 송신 이벤트와 조합 (0) | 2023.03.19 |
| 두 개의 MySQL 데이터베이스를 동기화하려면 어떻게 해야 합니까? (0) | 2023.03.19 |
| json과 xml의 차이점은 무엇입니까? (0) | 2023.03.19 |
| 반응 경고: 다른 구성 요소의 기능 본체 내부에서 구성 요소를 업데이트할 수 없습니다. (0) | 2023.03.19 |