[解決済み] jQuery.Ajaxでファイルをダウンロードする

質問

サーバーサイドで、Struts2のアクションでファイルをダウンロードするようにしています。

<action name="download" class="com.xxx.DownAction">
    <result name="success" type="stream">
        <param name="contentType">text/plain</param>
        <param name="inputName">imageStream</param>
        <param name="contentDisposition">attachment;filename={fileName}</param>
        <param name="bufferSize">1024</param>
    </result>
</action>

しかし、jQueryを使用してアクションを呼び出すと。

$.post(
  "/download.action",{
    para1:value1,
    para2:value2
    ....
  },function(data){
      console.info(data);
   }
);

でデータを取得していることがわかります。 バイナリストリーム . を開くにはどうしたらいいのでしょうか？ ファイルダウンロード画面 この場合、ユーザーはファイルをローカルに保存することができますか？

解決方法は？

2019モダンブラウザアップデート

この方法は、いくつかの注意点を除き、私が今お勧めする方法です。

• 比較的新しいブラウザが必要です
• を想定している場合、そのファイルは 非常に大きい というのも、以下の操作のいくつかは、ダウンロードされるファイルと少なくとも同じ大きさのシステムメモリを消費する可能性があり、また、その他の興味深い CPU 副作用が発生する可能性があるからです。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012年 jQuery/iframe/Cookieを使ったオリジナルアプローチ

ブルー系 なぜなら、JavaScriptはユーザーのコンピュータに直接ファイルを保存することができないからです（セキュリティ上の問題で）。残念ながら メインウィンドウの の URL をファイルのダウンロード先に指定することは、ファイルのダウンロードが発生したときのユーザー体験をほとんど制御できないことを意味します。

私が作成した jQueryファイルダウンロード OnSuccessとOnFailureコールバックにより、Ajaxライクなファイルダウンロードを実現し、より良いユーザーエクスペリエンスを提供します。私の ブログ記事 このプラグインが解決する一般的な問題と、その使用方法、そして jQuery File Downloadの動作デモ . 以下は ソース

このプラグインを使った簡単なユースケース・デモは次のとおりです。 ソース プロミスと一緒に は、その デモページ 他にも多くの「より良いUX」の例があります。

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

対応すべきブラウザによっては https://github.com/eligrey/FileSaver.js/ これは、jQuery File Downloadが使用するIFRAMEメソッドよりも、より明示的な制御を可能にします。