web-dev-qa-db-ja.com

サーバーと対話せずにJavaScriptデータをCSVファイルにエクスポートする

NodeJSサーバーを使用している場合、ヘッダーを作成し、MIMEタイプを設定して送信できます。

res.header("Content-Disposition", "attachment;filename="+name+".csv"); 
res.type("text/csv");
res.send(200, csvString);

ヘッダーのため、ブラウザは指定されたcsvファイルのダウンロードを作成します。

有用なデータがブラウザーで生成された場合、CSVファイルで取得するための1つのソリューションは、ajaxを使用してサーバーにアップロードし（おそらくオプションでそこに保存し）、サーバーにこれらのヘッダーを付けて返送することですブラウザでcsvをダウンロードします。

ただし、サーバーとのピンポンを必要としない100％のブラウザーソリューションが必要です。

だから、新しいウィンドウを開いて、同等のMETAタグでヘッダーを設定しようとすることができました。

しかし、これは最近のChromeでは機能しません。

新しいウィンドウが表示され、csvStringが含まれていますが、ダウンロードとしては機能しません。

一番下のタブにダウンロードが表示されるか、一番下のタブにダウンロードが表示される新しいウィンドウが表示されると予想していました。

メタタグが正しいのか、他のタグも必要なのか疑問に思っています。

サーバーにパントせずにこの作業を行う方法はありますか？

ブラウザでCSVを作成するためのJsFiddle（動作していません-出力ウィンドウがダウンロードなし）

var A = [['n','sqrt(n)']];  // initialize array of rows with header row as 1st item
for(var j=1;j<10;++j){ A.Push([j, Math.sqrt(j)]) }
var csvRows = [];
for(var i=0,l=A.length; i<l; ++i){
    csvRows.Push(A[i].join(','));   // unquoted CSV row
}
var csvString = csvRows.join("\n");
console.log(csvString);
var csvWin = window.open("","","");
csvWin.document.write('<meta name="content-type" content="text/csv">');
csvWin.document.write('<meta name="content-disposition" content="attachment;  filename=data.csv">  ');
csvWin.document.write(csvString);
javascriptexport-to-csv
75
Paul

常にHTML5 download 属性があります：

この属性が存在する場合、作成者がハイパーリンクをリソースのダウンロードに使用することを意図しているため、ユーザーがリンクをクリックすると、ローカルファイルとして保存するように求められます。

属性に値がある場合、その値は、ユーザーがリンクをクリックしたときに開く保存プロンプトで事前に入力されたファイル名として使用されます。

var A = [['n','sqrt(n)']];

for(var j=1; j<10; ++j){ 
    A.Push([j, Math.sqrt(j)]);
}

var csvRows = [];

for(var i=0, l=A.length; i<l; ++i){
    csvRows.Push(A[i].join(','));
}

var csvString = csvRows.join("%0A");
var a         = document.createElement('a');
a.href        = 'data:attachment/csv,' +  encodeURIComponent(csvString);
a.target      = '_blank';
a.download    = 'myFile.csv';

document.body.appendChild(a);
a.click();

FIDDLE

ChromeおよびFirefoxでテスト済みで、最新バージョンで正常に動作します（2013年7月現在）。
Operaでも機能しますが、ファイル名は設定しません（2013年7月現在）。
IE9では動作しないようです（大きなサプライズ）（2013年7月現在）。

どのブラウザがダウンロード属性をサポートしているかの概要は Here にあります。
サポートしていないブラウザの場合、サーバーサイドで適切なヘッダーを設定する必要があります。

どうやら IE10とIE11のハック があり、これはdownload属性をサポートしていません（Edgeはそうですが）。

var A = [['n','sqrt(n)']];

for(var j=1; j<10; ++j){ 
    A.Push([j, Math.sqrt(j)]);
}

var csvRows = [];

for(var i=0, l=A.length; i<l; ++i){
    csvRows.Push(A[i].join(','));
}

var csvString = csvRows.join("%0A");

if (window.navigator.msSaveOrOpenBlob) {
    var blob = new Blob([csvString]);
    window.navigator.msSaveOrOpenBlob(blob, 'myFile.csv');
} else {
    var a         = document.createElement('a');
    a.href        = 'data:attachment/csv,' +  encodeURIComponent(csvString);
    a.target      = '_blank';
    a.download    = 'myFile.csv';
    document.body.appendChild(a);
    a.click();
}
157
adeneo

@adeneoの回答はFirefoxおよびchromeで機能します... IEの場合、以下を使用できます。

if (window.navigator.msSaveOrOpenBlob) {
  var blob = new Blob([decodeURIComponent(encodeURI(result.data))], {
    type: "text/csv;charset=utf-8;"
  });
  navigator.msSaveBlob(blob, 'FileName.csv');
}
30
Manu Sharma

Adeneoの答えをご覧ください。ただし、encodeURIComponentを忘れないでください！

a.href     = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvString);

また、行区切り文字に「\ n」だけでなく「\ r\n」を実行する必要がありました。

var csvString = csvRows.join("\r\n");

修正されたフィドル： http://jsfiddle.net/7Q3c6/

15
user2608223

それを行うJSコードを小さなライブラリにパックしたら：

https://github.com/AlexLibs/client-side-csv-generator

コード、ドキュメント、およびデモ/プレイグラウンドはGithubで提供されます。

楽しい ：）

プルリクエストは大歓迎です。

7
Alexander

Adeneoの回答を参照してください。ただし、すべての国でこの機能をExcelで機能させるには、ファイルの最初の行に「SEP =」を追加する必要があります。これにより、Excelで標準の区切り文字が設定され、実際のドキュメントには表示されません

var csvString = "SEP=, \n" + csvRows.join("\r\n");
2
Thyselius

JavaScriptを使用して、任意の区切り記号（この回答ではコンマ区切り記号を使用しています）を使用してExcelファイルを簡単に作成およびエクスポート/ダウンロードできます。 Excelファイルの作成に外部パッケージを使用していません。

    var Head = [[
        'Heading 1',
        'Heading 2', 
        'Heading 3', 
        'Heading 4'
    ]];

    var row = [
       {key1:1,key2:2, key3:3, key4:4},
       {key1:2,key2:5, key3:6, key4:7},
       {key1:3,key2:2, key3:3, key4:4},
       {key1:4,key2:2, key3:3, key4:4},
       {key1:5,key2:2, key3:3, key4:4}
    ];

for (var item = 0; item < row.length; ++item) {
       Head.Push([
          row[item].key1,
          row[item].key2,
          row[item].key3,
          row[item].key4
       ]);
}

var csvRows = [];
for (var cell = 0; cell < Head.length; ++cell) {
       csvRows.Push(Head[cell].join(','));
}
            
var csvString = csvRows.join("\n");
let csvFile = new Blob([csvString], { type: "text/csv" });
let downloadLink = document.createElement("a");
downloadLink.download = 'MYCSVFILE.csv';
downloadLink.href = window.URL.createObjectURL(csvFile);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
0
Pulkit Aggarwal