web-dev-qa-db-ja.com

Javascript：ページ内のコンテンツからファイルにデータをダウンロードします

設定は次のとおりです。ページ内からカンマ区切り値を使用して作成された図を表示するホームページがあります。サーバーに再度アクセスすることなく、ユーザーがデータをcvs-fileとしてダウンロードできるようにしたいと思います。 （データがすでにあるので）これはどういうわけか可能ですか？私は純粋なJavaScriptソリューションを好みます。

これまでのところ、私は発見しました： http://pixelgraphics.us/downloadify/test.html ですが、フラッシュを使用しているため、回避したいと考えています。

この質問が以前に尋ねられたことがないとは思えません。二重投稿して申し訳ありませんが、間違ったキーワードなどを使用したようです。これらのフォーラムで解決策を見つけられませんでした。

javascriptfiledownloadlocal
22
Simon

更新：

時間は確かに状況を変えます;-)私がこの質問に最初に答えたときIE8は最新のIEブラウザが利用可能でした（2010年11月） ）、したがって、サーバーへのラウンドトリップなしで、またはFlashを必要とするツールを使用せずに、これを実現するクロスブラウザーの方法はありませんでした。

@ Zectburnoの答え は、今必要なものを提供しますが、歴史的なコンテキストでは、どのIEブラウザがどの機能をサポートするか）に注意してください。

  • btoa（）はIE8およびIE9では定義されていません
  • BlobはIE10以降で利用できます

サポートする必要のあるブラウザで必ずテストしてください。他の回答のBlobの例はIE10 +で機能するはずですが、リンクをクリックするだけでは機能しません（ブラウザーは何もせず、エラーも発生しません）...右クリックしてターゲットを「file.csv」として保存した場合のみファイルに移動してダブルクリックすると、ファイルを開くことができます。

このJSFiddleで両方のアプローチ（btoa/Blob）をテストします。 （ここにコードがあります）

<!doctype html>
<html>
<head>
</head>
<body>
  <a id="a" target="_blank">Download CSV (via btoa)</a>
  <script>
    var csv = "a,b,c\n1,2,3\n";
    var a = document.getElementById("a");
    a.href = "data:text/csv;base64," + btoa(csv);
  </script>
  <hr/>
  <a id="a2" download="Download.csv" type="text/csv">Download CSV (via Blob)</a>
  <script>
    var csv = "a,b,c\n1,2,3\n";
    var data = new Blob([csv]);
    var a2 = document.getElementById("a2");
    a2.href = URL.createObjectURL(data);
  </script>
</body>
</html>

元の回答：

これに利用できるオプションはないと思います。

ユーザーのシステムでFlash 10+が検出された場合（ 2009年9月の時点で93％飽和 ）、Downloadifyオプションを提供するようにコードを調整します。それ以外の場合はサーバー側のリクエストにフォールバックします。

8
scunliffe

Safari 5、Firefox 6、Opera 12、Chrome 26。

<a id='a'>Download CSV</a>
<script>
    var csv = 'a,b,c\n1,2,3\n';
    var a = document.getElementById('a');
    a.href='data:text/csv;base64,' + btoa(csv);
</script>

HTML5

<a id='a' download='Download.csv' type='text/csv'>Download CSV</a>
<script>
    var csv = 'a,b,c\n1,2,3\n';
    var data = new Blob([csv]);
    var a = document.getElementById('a');
    a.href = URL.createObjectURL(data);
</script>
28
Zectbumo

簡単な解決策：

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

使用方法

download("csv_data_here", "filename.csv", "text/csv");
18
Yassir Ennazk
function export(exportAs) {
    var csvText = tableRowsToCSV(this.headTable.rows);­
    csvText += tableRowsToCSV(this.bodyTable.rows);­
    //open the iframe doc for writing
    var expIFrame;
    if (strBrowser == "MSIE") expIFrame = document.exportiframe;
    else expIFrame = window.framesexportiframe;
    var doc = expIFrame.document;
    doc.open('text/plain', 'replace');
    doc.charset = "utf-8";
    doc.write(csvText);
    doc.close();
    var fileName = exportAs + ".txt";
    doc.execCommand("SaveAs", null, fileName);
}

function tableRowsToCSV(theRows) {
    var csv = "";
    var csvRow = "";
    var theCells;
    var cellData = "";
    for (var r = 0; r < theRows.length; r++) {
        theCells = theRows.item(r).cells;
        for (var c = 0; c < theCells.length; c++) {
            cellData = "";
            cellData = theCells.item(c).innerText;
            if (cellData.indexOf(",") != -1) cellData = "'" + cellData + "'";
            if (cellData != "") csvRow += "," + cellData;
        }
        if (csvRow != "") csvRow = csvRow.substring(1, csvRow.length);­
        csv += csvRow + "\n";
        csvRow = "";
    }
    return csv;
}

私はこのコードを他の場所で見つけました here 、以前

3
Blowsie

私の知る限り、これは不可能です。これが、Downloadifyが作成された理由です。

data:URL CSVデータが含まれていますが、ブラウザ間の問題が発生します。

3
Pekka

ユーザーが最新のブラウザを使用している場合は、新しいBlobオブジェクトが役立ちます。

ここの例 https://developer.mozilla.org/en/docs/DOM/Blob （ "Blobコンストラクターの使用例"）に基づいて、次のようなことができます。

var typedArray = "123,abc,456"; //your csv as a string
var blob = new Blob([typedArray], {type: "text/csv"});
var url = URL.createObjectURL(blob);
var a = document.querySelector("#linktocsv"); // the id of the <a> element where you will render the download link
a.href = url;
a.download = "file.csv";
2
Joe Sarre

私が遭遇した最も包括的なソリューションは FileSaver.js を使用して、フォールバックで多くの潜在的なクロスブラウザー問題を処理します。

他のポスターと同じようにBlobオブジェクトを利用しており、作成者は必要に応じてBlob.jsポリフィルも作成しますBlobをサポートしないブラウザバージョンをサポートする

2
Andrew Ho

HTML：

<a href="javascript:onDownload();">Download</a>

JavaScript：

function onDownload() {
    document.location = 'data:Application/octet-stream,' +
                         encodeURIComponent(dataToDownload);
}

JavaScriptからデータをファイルとしてダウンロードする方法 から取得

0
Sneg