angularjsを使用してxlsにエクスポートします
私はangular jsアプリで作業していますが、angular jsを使用してXlsにデータをエクスポートする必要がある状況に陥りました。エクスポート機能やangular jsのライブラリをインターネットでたくさん検索したので、それを行うことができます。または、少なくともエクスポート方法のアイデアを得ることができます。ここに表示するコードや作業はありません。
提案が必要です。これで私を助けてください。
前もって感謝します。
更新：
オブジェクトの配列であるデータがあり、テーブルのUIでそれを繰り返しています。私のバックエンドはnode.jsであり、フロントエンドはangular 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ライブラリを使用したソリューションが必要です。
これを行う簡単な方法は、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/
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: "[email protected]",
dob: "1985-10-10"
}, {
name: "Jane Smith",
email: "[email protected]",
dob: "1988-12-22"
}];
}
JsFiddleの この例 の完全なHTMLおよびJavaScriptコードを参照してください。
更新別の セルの色付けの例 。
また、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エクスポートに関するドキュメント： http://ui-grid.info/docs/#/tutorial/206_exporting_data
1つの出発点は、このディレクティブ（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();
};
Anglejsのコントローラーにエクスポートする必要があるJSONファイルが必要であり、HTMLファイルから呼び出すことができるはずです。両方を見ていきます。ただし、開始する前に、まずangularライブラリに2つのファイルを追加する必要があります。これらの2つのファイルはjson-export-Excel.jsとfilesaver.jsです。さらに、angularモジュールに依存関係を含める必要があります。したがって、最初の2つの手順は次のように要約できます。
1）json-export.jsとfilesaver.jsをangularライブラリに追加します。
2）angularモジュールにngJsonExportExcelの依存関係を含めます。
var myapp = angular.module('myapp', ['ngJsonExportExcel'])
必要なファイルを含めたので、HTMLファイルとコントローラーで行う必要がある変更に移ることができます。 jsonが手動で、またはバックエンドを呼び出してコントローラーで作成されていると想定しています。
HTML
Current Page as Excel
All Pages as Excel
作業したアプリケーションでは、バックエンドからページ分割された結果をもたらしました。そのため、Excelにエクスポートするための2つのオプションがありました。 1つは現在のページ用で、もう1つはすべてのデータ用です。ユーザーがオプションを選択すると、json（リスト）を準備するコントローラーに呼び出しが送られます。リスト内の各オブジェクトは、Excelの行を形成します。
詳しくは、- https://www.oodlestechnologies.com/blogs/Export-to-Excel-using-AngularJS をご覧ください。
$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形式のテーブルを取得することです。これが、Excelやgoogleでファイルを開けない理由です。あなたがしなければならないのは、jsファイルをエクスポートしてから関数を呼び出すことです。これはgithubのURLです https://github.com/snake404/tableToCSV 誰かが同じ問題を抱えている場合。