Exportar para xls utilizando angularjs
estou a trabalhar na aplicação angular js e fiquei numa situação em que tenho de exportar dados para Xls usando JS angulares. Eu procurei muitas funcionalidades de exportação na internet ou em qualquer biblioteca por js angulares para que eu possa fazer isso ou pelo menos eu possa ter a idéia de como exportar. Não tenho nenhum código ou Trabalho para mostrar aqui.
Preciso de sugestões. Por favor, ajuda-me nisto. Obrigado antecipadamente.actualização:
Tenho um dado que é um conjunto de objectos e sou a pôr isso na UI numa mesa. A minha infra-estrutura é o nó.js e frontend são js angulares.o meu problema é que se tivermos os dados do servidor e eu estiver a usar na UI, Como posso usar os mesmos dados para exportar para Xls usando o angular js. Eu não quero fazer uma chamada novamente na infra-estrutura para extrair os dados e exportar isso.
na tabela existente, o utilizador pode seleccionar a opção (Qualquer número de linhas ou todas as linhas) para extrair os dados para Xls.
no nó.js I utilizou o módulo de nó cujo nome é: Excel e está disponível no site nodemódulos.
Os meus dados são assim:"data": [
{
"Name": "ANC101",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia": "apple"]
},{
"Name": "ABC102",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia": "iPhone"]
}
]
Quero a solução usando angularjs ou qualquer biblioteca angularjs.
8 answers
Uma forma barata de fazer isto é usar o Angular para gerar um <table> e usar O Protector de Ficheiros.js para enviar o quadro como um .ficheiro xls para o utilizador transferir. O Excel será capaz de abrir a tabela HTML como uma planilha.
<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>
Chamada de exportação:
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report.xls");
};
Demo: http://jsfiddle.net/TheSharpieOne/XNVj3/1/
Demo actualizada com funcionalidade de checkbox e dados do question. Demo: http://jsfiddle.net/TheSharpieOne/XNVj3/3/
Pode tentar Alasql biblioteca JavaScript que pode trabalhar em conjunto com o XLSX.js library for easy export of Angular.js data. Este é um exemplo de controlador com função exportData ():
function myCtrl($scope) {
$scope.exportData = function () {
alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]);
};
$scope.items = [{
name: "John Smith",
email: "[email protected]",
dob: "1985-10-10"
}, {
name: "Jane Smith",
email: "[email protected]",
dob: "1988-12-22"
}];
}
Veja o código HTML e JavaScript completo para este exemplo em jsFiddle.
UPDATED Another example with coloring cells .
Também tens de incluir dois bibliotecas:
Aqui está a minha solução embalada.
Por exemplo, os dados são:
$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>
Se carregar os seus dados na grelha ng, poderá usar o 'plugin' de exportação do CSV. O plugin cria um botão com os dados da grelha como csv dentro de uma marca href.
Http://angular-ui.github.io/ng-grid/
Https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-csv-export.js
Actualizar as ligações à medida que a Biblioteca foi renomeada:
Ligação Github: https://github.com/angular-ui/ui-grid
Página da Biblioteca: http://ui-grid.info/
Documentação sobre a exportação de csv : http://ui-grid.info/docs/#/tutorial/206_exporting_data
Um ponto de partida poderia ser usar esta directiva (ng-csv) apenas baixar o ficheiro como csv e isso é algo que o excel pode compreender
Http://ngmodules.org/modules/ng-csv
Talvez possas adaptar este código (ligação actualizada):
Http://jsfiddle.net/Sourabh_/5ups6z84/2/
Ainda que pareça XMLSS (avisa-o antes de abrir o ficheiro, se optar por abrir o ficheiro que irá abrir correctamente)
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))
}
})()
Tente em baixo com o nome do ficheiro personalizado:
$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
Tive este problema e fiz uma ferramenta para exportar uma tabela HTML para o ficheiro CSV. O problema que tive com o protector de Ficheiros.js é que esta ferramenta pega a tabela com formato html, é por isso que algumas pessoas não podem abrir o arquivo no excel ou google. Tudo que você tem que fazer é exportar o arquivo js e, em seguida, chamar a função. Este é o url do github https://github.com/snake404/tableToCSV se alguém tiver o mesmo problema.