jQueryを使用してファイルをダウンロードする


113

ユーザーがリンクをクリックしたときにダウンロードを促すにはどうすればよいですか。

たとえば、次の代わりに:

<a href="uploads/file.doc">Download Here</a>

私は使うことができます:

<a href="#">Download Here</a>

 $('a').click... //Some jquery to download the file

このように、Googleは私のHREFとプライベートファイルをインデックスに登録しません。

これはjQueryで実行できますか?または、これはPHPまたは何か代わりに行う必要がありますか?


回答:


165

より優雅に機能を低下させるソリューションとして、これを使用することをお勧めしpreventDefaultます:

$('a').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = 'uploads/file.doc';
});

<a href="no-script.html">Download now!</a>

JavaScriptがなくても、少なくともこの方法でユーザーはいくつかのフィードバックを得ることができます。


20
jQueryのは、ある答え。
EstebanKüber2009

ありがとう、これは私が探していたものです。私は通常「preventDefault」を使用していますが、怠惰だったため、上記では省略しました。;-)
Dodinas 2009

2
正常に動作しますが、MIMEタイプのエラーがいくつか発生します。それらを乗り越える方法があるかどうか知りたいですか?
Nathan Hangen、

2
MIMEタイプの警告を解決しましたか?「リソースはドキュメントとして解釈されますが、MIMEタイプで転送されます...」と表示されます。
user1824269 2013年

22

検索エンジンで特定のファイルにインデックスを付けたくない場合は、robots.txtを使用できますをして、WebスパイダーにWebサイトの特定の部分にアクセスしないように指示できます。

JavaScriptのみに依存している場合、JavaScriptなしで閲覧している一部のユーザーはリンクをクリックできません。


1
「robots.txt」について知っておくと役に立ちます。ありがとうございました。
Dodinas 2009

@ Rob、URLを「非公開」にrobots.txtする必要がある場合は、ブラウザーの履歴サーバーと中間サーバーに保存されるため、役に立ちません。
Pacerier 2015

3
6年後:JavaScriptなしでブラウジング?-まあ、代わりに散歩に行くこともできます。
low_rents 2015

ほぼ10年後:同じ!または?
toing_toing

18

検索エンジンからファイルを非表示にする多くの方法を示す素晴らしい記事を以下に示します。

http://antezeta.com/news/avoid-search-engine-indexing

JavaScriptは、ページをインデックスに登録しないための良い方法ではありません。ユーザーがファイルに直接リンクする(つまり、ファイルをクローラーに公開する)ことを妨げることはなく、Robが述べたように、すべてのユーザーに対して機能するわけではありません。
簡単な修正は、rel="nofollow"属性を追加することですが、robots.txtがなければ完全ではありません。

<a href="uploads/file.doc" rel="nofollow">Download Here</a>

2
これは、「nofollow」または「me」の関係を理解するのに大いに役立つWebmasersのGoogleヘルプの別の記事です
2000

12

はい、window.location.hrefをダウンロードするファイルのURLに変更する必要があります。

window.location.href = 'http://www.com/path/to/file';

ファイル拡張子が.htmlの場合、ダウンロードではなく、そのhtmlファイルにリダイレクトされます
Kaleem Nalband

9
 var link=document.createElement('a');
 document.body.appendChild(link);
 link.href=url;
 link.click();

エラーはなく、ダウンロードが開始されていませんでした。要素の作成中に、いくつかの点が欠けていると思います。
shyammakwana.me 2016年

要素<a>が作成されたかどうかをhtmlで確認し、作成されていない場合はファイルリンクを確認してください。
EL missaoui habib

タグが本文にありました。手動でクリックすると、ダウンロード画像になります。ただし、今は必要ありません。このvanillaJSソリューションを使用しました。
shyammakwana.me 2016年

リンクが正しく機能していない理由はありません。ブラウジングで直接リンクをテストする
EL missaoui habib

$('blah').each(function(){ $('body').append('<a href="'+xxx+'" download="'+dynamicname+'" />'); }) $('a').trigger('click');私はそれを使いました。
shyammakwana.me 2016年


6

window.location.href = 'uploads/file.doc';ファイルを保存する場所を示すことにより、もちろん、.htacessを使用して、格納されたファイルに必要な動作を強制することもできますが、これは必ずしも一握りとは限りません。...

サーバーサイドのphpファイルを作成して、このコンテンツをその中に配置することをお勧めします。

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.$_REQUEST['f']);
readfile('../some_folder/some_subfolder/'.$_REQUEST['f']); 
exit;

このコードは、実際にどこに保存するかを示さずに、すべてのファイルをダウンロードとして返します。

このphpファイルを開いて window.location.href = 'scripts/this_php_file.php?f=downloaded_file';


このソリューションは、私のサイトでのダウンロードの問題を解決するのに役立ちました。ありがとうございます。
Denniz

3

非表示のiframeが役立ちます


var redeemFrame = document.createElement( "iframe"); var src = "doDownload.php"; redeemFrame.setAttribute( "src"、src); redeemFrame.setAttribute( "style"、 "display:none"); document.body.appendChild(redeemFrame);
DarthRez

3

クリックイベントの前に呼び出されるマウスダウンイベントを使用することをお勧めします。このようにして、ブラウザーはクリックイベントを自然に処理し、コードの奇妙さを回避します。

(function ($) {


    // with this solution, the browser handles the download link naturally (tested in chrome and firefox)
    $(document).ready(function () {

        var url = '/private/downloads/myfile123.pdf';
        $("a").on('mousedown', function () {
            $(this).attr("href", url);
        });

    });
})(jQuery);

0

jQueryを使用してフォームをクリアする同様の投稿については、ここを参照してください:jQueryを使用したマルチステージフォームのリセット

また、Struts値スタックによって値が再入力される問題が発生している可能性もあります。つまり、フォームを送信し、アクションクラスで何でも実行しますが、アクションクラスの関連フィールドの値はクリアしません。このシナリオでは、フォームは以前に送信した値を維持しているように見えます。これらを何らかの方法で永続化している場合は、永続化した後、SUCCESSを返す前に、アクションクラスの各フィールド値をnullにしてください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.