CSV, Excel, PDF 형식의 Angular로 데이터 내보내기제이에스
내 앱에 CSV, Excel, PDF 형식의 내보내기 테이블 데이터를 추가하고 싶습니다.
저는 angularjs 1.2.16을 이용하여 앱을 만들고 있습니다.
Excel로 데이터 내보내기
사용한 적이 있습니다.
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
다음 코드를 사용하여 테이블을 XLS 형식으로 내보냅니다.
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "report.xls");
위 코드는 정상적으로 작동합니다.
CSV, PDF로 데이터 내보내기
마찬가지로 CSV와 PDF 형식으로 데이터를 내보내고 싶습니다.
http://www.directiv.es/ng-csv 을 사용하여 CSV로 데이터를 내보냈지만 unbuntu libreoffice에서 제대로 작동하지 않습니다(파일에 손상된 데이터가 표시됨).
테이블 데이터를 CSV, Excel 및 PDF 형식으로 Angularjs로 내보내는 방법을 알려줄 수 있는 사람이 있습니까?
Angular에서 데이터를 내보낼 수 있습니다.XLSX.js가 있는 Alasql JavaScript 라이브러리를 사용하는 JS - XLS, XLSX, CSV 및 TAB 형식.
코드에 두 개의 라이브러리를 포함합니다.
데이터를 Excel 형식으로 내보내려면 컨트롤러 코드에 함수를 만듭니다.
function myCtrl($scope) {
$scope.exportData = function () {
alasql('SELECT * INTO XLSX("mydata.xlsx",{headers:true}) FROM ?',[$scope.items]);
};
$scope.items = [{a:1,b:10},{a:2,b:20},{a:3,b:30}];
};
그런 다음 HTML로 단추(또는 다른 링크)를 만듭니다.
<div ng-controller="myCtrl">
<button ng-click="exportData()">Export</button>
</div>
jsFiddle에서 이 예제를 사용해 보십시오.
데이터를 CSV 형식으로 저장하려면 CSV() 함수를 사용합니다.
alasql("SELECT * INTO CSV('mydata.csv', {headers:true}) FROM ?",[$scope.mydata]);
또는 적절한 파일 형식을 위해 TXT(), CSV(), TAB(), XLS() 함수를 사용합니다.
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}];
}
saveAs; "f:\folder\report.html" 디렉터리와 같이 등록된 파일 확장명을 변경하려면?
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" });
saveAs(blob, "report.xls");
저는 몇 가지 접근 방식을 검토했고 다음과 같은 유형 안전(확실히)을 결론 내렸습니다.입력됨):
exportAsExcel(tableId: string, fileName: string, linkElement: any) {
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(decodeURI(encodeURIComponent(s)));
},
format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
});
};
// get the table data
var table = document.getElementById(tableId);
var ctx = {
worksheet: fileName,
table: table.innerHTML
};
// if browser is IE then save the file as blob, tested on IE10 and IE11
var browser = window.navigator.appVersion;
if ((browser.indexOf('Trident') !== -1 && browser.indexOf('rv:11') !== -1) ||
(browser.indexOf('MSIE 10') !== -1)) {
var builder = new MSBlobBuilder();
builder.append(uri + format(template, ctx));
var blob = builder.getBlob('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
window.navigator.msSaveBlob(blob, fileName + '.xlsx');
} else {
var element = document.getElementById(linkElement);
var a = document.createElement('a');
a.href = uri + base64(format(template, ctx));
a.target = '_blank';
a.setAttribute('download', fileName + '.xlsx');
document.body.appendChild(a);
a.click();
}
toastr.success("Awesome!", "We've created an Excel report for you and you should get it as a download in your browser.");
}
칭찬은 다양한 기사에 당연히 기여한 사람들에게 갑니다.
테이블의 데이터를 Json, Xml, Pdf 등 다양한 형식으로 내보낼 수 있습니다.
자세한 설명은 http://www.prathapkudupublog.com/2015/10/angular-export-to-table.html 에서 확인할 수 있습니다. 참고:이 구현은 IE에서 실행되지 않습니다.
무엇이 필요합니까?Angularjs Jquery.js 테이블 아래에서 참조되는 파일Export.js,JqueryBase64.js,html2canvas.js,base64.js,Jspdf.js,sspprintf.제이에스
<script type="text/javascript">
var myAppModule = angular.module('myApp', []);
myAppModule.controller('myCtrl', function ($scope) {
$scope.exportData = function () {
$('#customers').tableExport({ type: 'json', escape: 'false' });
};
$scope.items = [
{
"FirstName": "Prathap",
"LastName": "Kudupu",
"Address": "Near Anjana Beach"
},
{
"FirstName": "Deepak",
"LastName": "Dsouza",
"Address": "Near Nariman Point"
}
];
});
언급URL : https://stackoverflow.com/questions/23592849/export-data-in-csv-excel-pdf-format-in-angularjs
'programing' 카테고리의 다른 글
| SQL Server 2012에서 SQL Server 2014의 백업을 복원할 수 있습니까? (0) | 2023.07.06 |
|---|---|
| WordPress에서 wp_remote_get을 사용하여 XML 작업 (0) | 2023.07.06 |
| '존재하지 않음'과 '존재하지 않음'의 차이점은 무엇입니까? (0) | 2023.07.06 |
| SQL Server가 1밀리초씩 손실되는 이유는 무엇입니까? (0) | 2023.07.06 |
| VUEX의 상태 변경을 수정하는 방법은 무엇입니까? (0) | 2023.07.06 |