私は最近WebGLをいじっていて、Colladaリーダーを動かしてもらいました。問題は、それがかなり遅い（Colladaは非常に冗長な形式です）ので、ファイルをより使いやすい形式（おそらくJSON）に変換し始めます。JavaScriptでファイルを解析するためのコードがすでにあるので、それをエクスポーターとして使用することもできます。問題は節約です。

これで、ファイルを解析して結果をサーバーに送信し、ブラウザーにサーバーからのダウンロードとしてファイルを要求するようにできることがわかりました。しかし実際には、サーバーはこの特定のプロセスとは何の関係もないので、なぜそれを関与させるのでしょうか。目的のファイルの内容はすでにメモリにあります。純粋なJavaScriptを使用してダウンロードをユーザーに提示する方法はありますか？（私はそれを疑っていますが、尋ねるかもしれません...）

そして明確にするために：私はユーザーの知識なしにファイルシステムにアクセスしようとはしていません！ユーザーはファイルを（おそらくドラッグアンドドロップで）提供し、スクリプトはファイルをメモリ内で変換し、結果をダウンロードするように求められます。ブラウザに関する限り、これらはすべて「安全な」アクティビティである必要があります。

[編集]：私はそれを前に述べなかったので、「フラッシュ」と答えたポスターは十分に有効ですが、私がしていることの一部は、純粋なHTML5で何ができるかを強調する試みです...私の場合はすぐに。（「実際の」Webアプリを実行しているすべての人にとって、これは完全に有効な答えですが）サーバーに関与したくない限り、私は運が悪いように見えます。とにかくありがとう！

OK、data：URIを作成すると、間違いなく私にとってうまくいきます。MatthewとDennksterがそのオプションを指摘しているおかげです！基本的には次のようにします。

1）すべてのコンテンツを「コンテンツ」と呼ばれる文字列に取得します（たとえば、最初にコンテンツを作成するか、すでに作成されているページのタグのinnerHTMLを読み取ることによって）。

2）データURIを作成します。

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

ブラウザの種類などによっては長さに制限がありますが、たとえばFirefox 3.6.12は少なくとも256kまで機能します。代わりに、encodeURIComponentを使用してBase64でエンコードすると、効率が上がる可能性がありますが、私にとっては問題ありませんでした。

3）新しいウィンドウを開いて、このURIに「リダイレクト」すると、JavaScriptで生成されたページのダウンロード場所の入力を求められます。

newWindow = window.open(uriContent, 'neuesDokument');

それでおしまい。

HTML5対応ブラウザ向けのシンプルなソリューション...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

使用法

download('test.txt', 'Hello world!');

HTML5はwindow.saveAs(blob, filename)メソッドを定義しました。現在、どのブラウザでもサポートされていません。しかし、FileSaver.jsと呼ばれる互換性ライブラリがあり、この機能を最新のほとんどのブラウザ（Internet Explorer 10以降を含む）に追加しています。Internet Explorer 10は、FileSaver.jsでInternet Explorerをサポートするために使用されるnavigator.msSaveBlob(blob, filename)メソッド（MSDN）をサポートしています。

私が書いたブログの投稿をこの問題の詳細と。

大きなファイルを保存する

長いデータURIは、ブラウザーでパフォーマンスの問題を引き起こす可能性があります。クライアント側で生成されたファイルを保存する別のオプションは、それらのコンテンツをBlob（またはFile）オブジェクトに入れ、を使用してダウンロードリンクを作成することURL.createObjectURL(blob)です。これは、BLOBのコンテンツを取得するために使用できるURLを返します。blobはURL.revokeObjectURL()、URLで呼び出されるか、それを作成したドキュメントが閉じられるまで、ブラウザー内に保存されます。ほとんどのWebブラウザーはオブジェクトURLをサポートしています。OperaMiniはそれらをサポートしない唯一のブラウザーです。

ダウンロードを強制する

データがテキストまたは画像の場合、ブラウザはファイルをディスクに保存する代わりに開くことができます。リンクをクリックするとファイルがダウンロードされるようにするには、download属性を使用できます。ただし、すべてのWebブラウザーがダウンロード属性をサポートしているわけではありません。もう1つのオプションはapplication/octet-stream、ファイルのMIMEタイプとして使用することですが、これによりファイルがバイナリBLOBとして表示され、ファイル名を指定できない場合や指定できない場合は特にユーザーに不便になります。「「名前を付けて保存」ポップアップをテキストリンクで開くことを強制するHTMLのPDFのクリック」も参照してください。

ファイル名の指定

BlobがFileコンストラクターで作成されている場合は、ファイル名も設定できますが、Fileコンストラクターをサポートしているのはごく一部のWebブラウザー（ChromeおよびFirefoxを含む）のみです。ファイル名はdownload属性の引数として指定することもできますが、これにはセキュリティ上の考慮事項がたくさんあります。Internet Explorer 10および11には、ファイル名を指定するための独自のメソッドmsSaveBlobが用意されています。

コード例

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;

<a id="link" target="_blank" download="file.txt">Download</a>

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();
}

これを行うためのFlashベースのJavaScriptインターフェースであるDoug NeinerのDownloadifyをご覧ください。

Downloadifyは小さなJavaScript + Flashライブラリで、サーバーとの対話なしで、ブラウザーでファイルをオンザフライで生成および保存できます。

シンプルなソリューション！

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

すべての最新ブラウザで動作します。

データURIを生成できます。ただし、ブラウザ固有の制限があります。

私はFileSaver（https://github.com/eligrey/FileSaver.js）を使用しましたが、問題なく動作します。
たとえば、ページに表示されたログをエクスポートするためにこの機能を実行しました。
Blobのインスタンス化のために配列を渡す必要があるので、これを正しい方法で記述しなかっただけかもしれませんが、私にとってはうまくいきます。
念のため、置換に注意してください。これは、このグローバルにする構文です。それ以外の場合は、最初に遭遇したものだけを置き換えます。

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

私には2つのシンプルなアプローチがうまくいきました。まず、既にクリックされたa要素を使用して、ダウンロードデータを挿入します。a次に、ダウンロードデータを含む要素を生成し、a.click()再度実行して削除します。ただし、2番目の方法は、ユーザーのクリックアクションによって呼び出された場合にのみ機能します。（一部）click()ロード時やタイムアウト（setTimeout）後のトリガーなど、他のコンテキストからのブラウザーブロック。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>

Mathewが提案したデータURIメソッドへのリンクは次のとおりです。これはサファリで機能しましたが、ファイルタイプを設定できなかったためうまくいきませんでした。「不明」として保存され、後で再びそこに移動して、順序を変更する必要がありますファイルを表示するには...

http://www.nihilogic.dk/labs/canvas2image/

localStorageを使用できます。これはHtml5のCookieに相当します。ChromeとFirefoxでは動作するようですが、Firefoxでは動作します。サーバーにアップロードする必要がありました。つまり、私の自宅のコンピューターで直接テストすることはできませんでした。

HTML5の例を作成しています。http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.htmlに移動し て、迷路にスクロールします。迷路を再構築するための情報は、localStorageを使用して保存されます。

この記事を読み、xmlファイルを読み込んで操作するためのHTML5 JavaScriptを探しました。古いhtmlやJavaScriptと同じですか????

試す

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

バイナリデータをダウンロードしたい場合はこちらをご覧ください

更新

2020.06.14 Chromeを83.0以上にアップグレードすると、SOスニペット停止は機能します（サンドボックスのセキュリティ制限により）-しかし、JSFiddleバージョンは機能します- ここで

前述のように、File APIは、FileWriterおよびFileSystem API とともに、ブラウザのタブ/ウィンドウのコンテキストからクライアントのマシンにファイルを格納するために使用できます。

ただし、次の2つのAPIに関連するいくつかの注意事項があります。

• 現在、APIの実装はChromiumベースのブラウザー（ChromeおよびOpera）にのみ存在します
• どちらのAPIも2014年4月24日にW3C標準トラックから外され、現在は独自仕様です
• 将来的にはブラウザーの実装から（現在は独自仕様の）APIを削除する可能性があります
• サンドボックス（ファイルは効果を生み出すことができないそのディスク外側の位置）をAPIで作成されたファイルを格納するために使用されます
• 仮想ファイルシステムに使用される（必ずしもそれがブラウザ内からアクセスする場合と同じ形式でディスク上に存在しないディレクトリ構造）APIで作成されたファイルを表します

これを行うために、APIを直接または間接的に組み合わせて使用​​する簡単な例を次に示します。

焼き菓子 *

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

未加工のFile、FileWriter、およびFileSystem APIの使用

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

FileSystem APIとFileWriter APIはもはや標準化の過程にありませんが、私の意見では、これらの使用は正当化できる場合があります。

• 実装されていないブラウザーベンダーからの新たな関心により、ブラウザーベンダーはすぐに再配置されます
• 実装（Chromiumベース）ブラウザーの市場浸透率は高い
• Google（Chromiumへの主な貢献者）は、APIにサポート終了日を示していません

ただし、「一部のケース」があなた自身のケースを包含するかどうかは、あなたが決めることです。

* BakedGoodsは、この男以外の誰もがここで管理しています:)

このスレッドは、バイナリファイルを生成し、指定されたファイルをダウンロードするように求める方法を理解するのに非常に役立ちました。

私にとっての最初のステップは、保存していたデータからバイナリBLOBを生成することでした。単一のバイナリタイプに対してこれを行うためのサンプルはたくさんあります。私の場合、配列として渡してBLOBを作成できる複数のタイプのバイナリ形式があります。

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}

次のステップは、事前定義された名前でこのbl​​obをダウンロードするようにユーザーにプロンプ​​トを表示させることです。

必要なのは、HTML5に追加した名前付きリンクだけで、これを再利用して初期ファイル名を変更できます。リンクを表示する必要がないため、非表示のままにしました。

<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>

最後のステップは、ユーザーにファイルをダウンロードするように促すことです。

var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById('lnkDownload');
lnkDownload.download = 'theDefaultFileName.extension';
lnkDownload.href = uriContent;
lnkDownload.click();

ファイルをZIPとしてエクスポートするチュートリアルは次のとおりです。

始める前に、ファイルを保存するためのライブラリがあり、ライブラリの名前はfileSaver.jsです。このライブラリはここにあります。さあ始めましょう、今、必要なライブラリを含めます：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

次に、このコードをコピーします。このコードは、Hello Worldというコンテンツを含むhello.txtファイルを含むzipファイルをダウンロードします。すべてがうまくいくと、ファイルがダウンロードされます。

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

これにより、file.zipというファイルがダウンロードされます。詳しくは、http：//www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-libraryをご覧ください。