w3u*_*uru 56 javascript excel xls angularjs
我正在研究角度js应用程序,我陷入了一种情况,我必须使用角度js将数据导出到Xls.我在互联网上搜索了很多出口功能或任何角度js的库,所以我可以做到这一点,或者至少我可以了解如何导出.我没有任何代码或工作要在这里展示.
我需要建议.请帮帮我.
提前致谢.
更新:
我有一个数据,它是一个对象数组,我在一个表中的UI上迭代它.我的后端是node.js,前端是角js.
我的问题是如果我们从服务器获取数据并且我在UI上使用,我如何使用相同的数据使用angular js导出到Xls.我不想再在后端拨打电话来提取数据并导出数据.
在现有表中,用户可以选中复选框(任意行数或所有行)以将数据提取到Xls.
在node.js中,我使用了名为:Excel的节点模块,它在nodemodules站点上可用.
我的数据是这样的:
"data": [
{
"Name": "ANC101",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia": "apple"]
},{
"Name": "ABC102",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia": "iPhone"]
}
]
我想要使用angularjs或任何angularjs库的解决方案.
The*_*One 63
一种廉价的方法是使用Angular生成<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/
age*_*hun 24
您可以尝试Alasql JavaScript库,它可以与XLSX.js库一起使用,以便轻松导出Angular.js数据.这是带有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代码.
您还需要包含两个库:
Kur*_*ven 16
当我需要类似的东西时,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>
小智 12
如果将数据加载到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导出的文档:http://ui-grid.info/docs/#/tutorial/206_exporting_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))
}
})()
| 归档时间： |
|
| 查看次数： |
181776 次 |
| 最近记录： |