☰

jQuery.Ajaxでファイルをダウンロードする 質問する

tag-icon • tag-icon javascript jquery ajax jsp download
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);
   }
);

Firebug では、データがバイナリ ストリームで取得されていることがわかります。ユーザーがファイルをローカルに保存できるファイル ダウンロード ウィンドウを開くにはどうすればよいのでしょうか。

ベストアンサー1

2019年最新ブラウザのアップデート

これは、いくつかの注意点を伴いながら私が今推奨するアプローチです:

  • 比較的新しいブラウザが必要です
  • ファイルが非常に大きくなることが予想される場合は、以下の操作の一部で、ダウンロードするファイルと少なくとも同じ大きさのシステム メモリが消費されたり、その他の CPU の副作用が発生する可能性があるため、元のアプローチ (iframe と cookie) に似た操作を行う必要があります。

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 はファイルをユーザーのコンピューターに直接保存できないため (セキュリティ上の懸念のため)、Ajax 経由でこれを行うことはできません。残念ながら、ファイルのダウンロード時にメイン ウィンドウのURL を指定すると、ファイルのダウンロードが発生したときのユーザー エクスペリエンスをほとんど制御できなくなります。

わたしは作ったjQuery ファイルのダウンロードこれにより、ファイルダウンロードで「Ajaxのような」エクスペリエンスを実現し、OnSuccessとOnFailureのコールバックを備え、ユーザーエクスペリエンスが向上します。ブログ投稿プラグインが解決する一般的な問題とその使用方法、そしてjQuery ファイルダウンロードのデモ. ここはソース

プラグインを使用した簡単な使用例のデモですソース約束とともに。デモページ他にも多くの「より良い 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 メソッドよりも明示的な制御が可能になります。

おすすめ記事