在AngularJS中以CSV，Excel，PDF格式导出数据
[英]Export data in CSV, Excel, PDF format in AngularJS
问题描述
I want to add export table data in CSV, Excel, PDF format functionality in my app. 
我想在我的应用程序中添加CSV，Excel，PDF格式功能的导出表数据。
I am building app using angularjs 1.2.16. 我正在使用angularjs 1.2.16构建应用程序。
Export data in Excel 在Excel中导出数据
I have used 我用过
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
to export table to XLS format using following code : 使用以下代码将表导出为XLS格式：
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "report.xls");
above code is working fine. 上面的代码工作正常。
Export data in CSV, PDF 以CSV，PDF格式导出数据
In the same way i want to export data in CSV and PDF format. 以同样的方式，我想以CSV和PDF格式导出数据。
I have used http://www.directiv.es/ng-csv to export data in CSV but it is not working fine in ubuntu libre office (file is showing corrupted data). 我已经使用http://www.directiv.es/ng-csv以CSV格式导出数据，但在ubuntu libre office中工作不正常（文件显示已损坏的数据）。
Can anyone tell me how to export table data in CSV,Excel and PDF format in angularjs? 谁能告诉我如何在angularjs中导出CSV，Excel和PDF格式的表格数据？
5 个解决方案
解决方案1
14 2014-12-16 08:50:55
You can export data from AngularJS to XLS, XLSX, CSV, and TAB formats with Alasql JavaScript library with XLSX.js . 您可以从AngularJS数据导出到XLS，XLSX，CSV和TAB格式的Alasql JavaScript库XLSX.js 。
Include two libraries into the code: 在代码中包含两个库：
To export data to Excel format create a function in the controller code: 要将数据导出为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}];
};
Then create a button (or any other link) in HTML: 然后在HTML中创建一个按钮（或任何其他链接）：
<div ng-controller="myCtrl">
<button ng-click="exportData()">Export</button>
</div>
Try this example in jsFiddle. 在jsFiddle中尝试这个例子 。
To save data into CSV format use CSV() function: 要将数据保存为CSV格式，请使用CSV（）函数：
alasql("SELECT * INTO CSV('mydata.csv', {headers:true}) FROM ?",[$scope.mydata]);
Or use TXT(), CSV(), TAB(), XLS(), XLSX() functions for proper file formats. 或者使用TXT（），CSV（），TAB（），XLS（），XLSX（）函数来获得正确的文件格式。
解决方案2
6 2014-11-26 12:47:03
If you're satisfied with a CSV file, then the ngCsv module is the way to go. 如果您对CSV文件感到满意，那么ngCsv模块就是您的选择。 You don't load elements from the DOM but export an array directly. 您不从DOM加载元素，而是直接导出数组。 Here you can see a sample of ngCsv in action. 在这里，您可以看到ngCsv的实际样本。
The html: html：
<h2>Export {{sample}}</h2>
<div>
<button type="button" ng-csv="getArray" filename="test.csv">Export</button>
</div>
and the js: 和js：
angular.module('csv', ['ngCsv']);
function Main($scope) {
$scope.sample = "Sample";
$scope.getArray = [{a: 1, b:2}, {a:3, b:4}];
}
解决方案3
2 2015-07-24 08:06:24
saveAs; 另存为; To change the registered file extension, for example: "f:\\folder\\report.html" directory? 要更改已注册的文件扩展名，例如：“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");
解决方案4
1 2016-06-19 10:38:08
I've worked through several approaches and concluded the following, typesafe (DefinitelyTyped): 我已经完成了几种方法并得出以下结论，类型安全（DefinitelyTyped）：
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.");
}
Kudos go to those who contributed of course in the various article.s 感谢那些在各种文章中做出贡献的人
解决方案5
0 2017-04-18 15:00:08
we can export data from a table into various format including Json, Xml, Pdf ..... 我们可以将表中的数据导出为各种格式，包括Json，Xml，Pdf ......
You can find detailed explanation http://www.prathapkudupublog.com/2015/10/angular-export-to-table.html Note: This implementation would not run in IE 你可以找到详细的解释http://www.prathapkudupublog.com/2015/10/angular-export-to-table.html注意：这个实现不会在IE中运行
What do you need? 你需要什么？ Angularjs Jquery.js Files referenced below tableExport.js,JqueryBase64.js,html2canvas.js,base64.js,Jspdf.js,sprintf.js Angularjs Jquery.js文件在下面的tableExport.js，JqueryBase64.js，html2canvas.js，base64.js，Jspdf.js，sprintf.js中引用
<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"
}
];
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.