Javascript/jQueryによるファイルのダウンロード
私は、ここで指定された非常に似た要件を持っています。
ユーザーのブラウザが $('a#someID').click();
の時に、手動でダウンロードを開始するようにしたいのです。
しかし、window.href
メソッドは、現在のページの内容をダウンロードしようとしているファイルに置き換えてしまうので、使えません。
代わりに、新しいウィンドウ/タブでダウンロードを開きたいのです。これはどのようにして可能なのでしょうか?
322
3
不可視の
<iframe>
を使用します。ブラウザがレンダリングできるはずのファイル(HTMLやテキストファイルなど)を強制的にダウンロードさせるには、サーバー側でファイルのMIMEタイプを、
application/x-please-download-me
や、任意のバイナリデータに使用されるapplication/octet-stream
などの無意味な値に設定する必要があります。新しいタブで開きたいだけであれば、ユーザーが
target
属性を_blank
に設定したリンクをクリックするしかありません。**jQueryの場合:***。
そのリンクがクリックされるたびに、新しいタブ/ウィンドウにファイルがダウンロードされます。
2019年モダンブラウザーのアップデート。
いくつかの注意点はありますが、これは私が現在推奨している方法です。
2012年オリジナルのjQuery/iframe/cookieベースのアプローチ。
私はjQuery File Download plugin (Demo) (GitHub)を作成しましたが、これもあなたの状況に役立つかもしれません。このプラグインはiframeとよく似た動作をしますが、私が非常に便利だと感じたいくつかのクールな機能があります。
セットアップがとても簡単で、美しいビジュアル(jQuery UI Dialog、ただし必須ではありません)、すべてがテストされています。
ユーザーは、ファイルのダウンロードを開始したのと同じページを離れることはありません。この機能は、現代のウェブアプリケーションにとって非常に重要になっています。
successCallbackとfailCallback関数により、ユーザーがどのような状況で見るかを明確にすることができます。
jQuery UIと組み合わせることで、開発者は、ファイルのダウンロードが行われていることをユーザーに伝えるモーダルを表示したり、ダウンロードが開始された後にモーダルを解除したり、エラーが発生したことをユーザーに親切に伝えたりすることができる。この例については、Demoを参照してください。ご参考になれば幸いです。
ここでは、プラグインsourceとプロミスを使った簡単なユースケースのデモをご紹介します。デモページ]2には、他にもたくさんの ' better UX'の例があります。
すでにjQueryを使用している場合は、それを利用してより小さなスニペットを作成することができます。 Andrew'さんの回答のjQueryバージョンです。