Javascriptを使用してExcel/CSVを生成する方法はありますか? (ブラウザとの互換性も必要です)
GithubにはExcel Builder(.js)と呼ばれる興味深いプロジェクトがあり、クライアント側でExcelをダウンロードする方法を提供していますxlsxファイル。Excelスプレッドシートの書式設定オプションが含まれます。
https://github.com/stephenliberty/Excel-builder.js
このライブラリを使用すると、ブラウザとExcelの両方の互換性の問題が発生する場合がありますが、適切な条件下では、非常に役立つ場合があります。
Excelのオプションは少ないがExcelの互換性の問題についての心配が少ない別のgithubプロジェクトは、ここで見つけることができます:ExcellentExport.js
https://github.com/jmaister/excellentexport
AngularJSを使用している場合、ng-csvがあります:
「配列とオブジェクトをダウンロード可能なCSVファイルに変換する単純なディレクティブ」。
サーバーでExcelファイルを生成できる場合は、おそらくそれが最善の方法です。 Excelを使用すると、書式設定を追加して、出力をより見やすくすることができます。いくつかのExcelオプションについては既に述べました。 PHPバックエンドがある場合、 phpExcel を検討できます。
クライアント上ですべてをJavaScriptで実行しようとしている場合、Excelはオプションではないと思います。 CSVファイルを作成し、データURLを作成して、ユーザーがダウンロードできるようにすることができます。
デモンストレーションするJSFiddleを作成しました: http://jsfiddle.net/5KRf6/3/
このjavascript(jQueryを使用していると仮定)は、テーブルの入力ボックスから値を取り出し、CSV形式の文字列を作成します。
var csv = "";
$("table").find("tr").each(function () {
var sep = "";
$(this).find("input").each(function () {
csv += sep + $(this).val();
sep = ",";
});
csv += "\n";
});
必要に応じて、ページ上のタグ(私の場合は「csv」のIDを持つタグ)にデータをドロップできます。
$("#csv").text(csv);
次のコードを使用して、そのテキストへのURLを生成できます。
window.URL = window.URL || window.webkiURL;
var blob = new Blob([csv]);
var blobURL = window.URL.createObjectURL(blob);
最後に、これはそのデータをダウンロードするためのリンクを追加します:
$("#downloadLink").html("");
$("<a></a>").
attr("href", blobURL).
attr("download", "data.csv").
text("Download Data").
appendTo('#downloadLink');
同様の回答が投稿されました here 。
実施例 のリンク
var sheet_1_data = [{Col_One:1, Col_Two:11}, {Col_One:2, Col_Two:22}];
var sheet_2_data = [{Col_One:10, Col_Two:110}, {Col_One:20, Col_Two:220}];
var opts = [{sheetid:'Sheet One',header:true},{sheetid:'Sheet Two',header:false}];
var result = alasql('SELECT * INTO XLSX("sample_file.xlsx",?) FROM ?', [opts,[sheet_1_data ,sheet_2_data]]);
必要なメインライブラリ-
<script src="http://alasql.org/console/alasql.min.js"></script>
<script src="http://alasql.org/console/xlsx.core.min.js"></script>
CSVファイルをWebサーバーに書き込み、URLを返すAJAXポストバックメソッドを作成します。ブラウザーで非表示のIFrameをサーバー上のCSVファイルの場所に設定します。
ユーザーにCSVダウンロードリンクが表示されます。
作業例で質問に答えるには:
<script type="text/javascript">
function DownloadJSON2CSV(objArray)
{
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str = '';
for (var i = 0; i < array.length; i++) {
var line = new Array();
for (var index in array[i]) {
line.Push('"' + array[i][index] + '"');
}
str += line.join(';');
str += '\r\n';
}
window.open( "data:text/csv;charset=utf-8," + encodeURIComponent(str));
}
</script>