web-dev-qa-db-ja.com

Javascriptを介してExcelを生成する方法

Javascriptを使用してExcel/CSVを生成する方法はありますか？ （ブラウザとの互換性も必要です）

javascriptexcel
56
Chinmay

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ファイルに変換する単純なディレクティブ」。

45
mg1075

サーバーで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');
31
digitaleagle

同様の回答が投稿されました 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>
9
Sujit Kumar Singh

CSVファイルをWebサーバーに書き込み、URLを返すAJAXポストバックメソッドを作成します。ブラウザーで非表示のIFrameをサーバー上のCSVファイルの場所に設定します。

ユーザーにCSVダウンロードリンクが表示されます。

2
gmc

作業例で質問に答えるには：

<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>
0
Fireworm