使用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或其他方法完成?


Answers:


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über09年

谢谢,这就是我想要的。我通常使用“ preventDefault”,因为我很懒,所以只在上面省略了它。;-)
Dodinas

2
效果很好,但出现一些MIME类型错误。好奇是否有办法克服它们?
内森·汉根

2
您解决了MIME类型警告吗?我收到“资源解释为文档,但以MIME类型传输的信息...”非常感谢。
user1824269 2013年

22

如果您不希望搜索引擎为某些文件编制索引,则可以使用robots.txt告诉网络蜘蛛不要访问您网站的某些部分。

如果您仅依靠javascript,那么一些没有使用javascript进行浏览的用户将无法单击您的链接。


1
很高兴了解“ robots.txt”。谢谢。
多迪纳斯

@Rob,如果您需要URL为“私有”,robots.txt将无济于事,因为它仍将存储在浏览器历史记录和中间服务器中。
Pacerier

3
6年后:不使用javascript浏览?-嗯,您也可以散步。
low_rents 2015年

近十年后:一样!要么 ?
toing_toing

18

这是一篇很好的文章,展示了从搜索引擎隐藏文件的多种方法:

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

JavaScript不是不索引页面的好方法。它不会阻止用户直接链接到您的文件(从而将其显示给搜寻器),而且正如罗布提到的那样,它不适用于所有用户。
一个简单的解决方法是添加rel="nofollow"属性,但是再次说明,没有robots.txt,它是不完整的。

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

2
这是Google Help for Webmasers的另一篇文章,对我了解“ nofollow”或“ me”相关性有很大帮助。
000

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年

验证您的html中是否创建了元素<a>或否,并验证您的文件链接。
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

我建议您使用mousedown事件,该事件在click事件之前被称为。这样,浏览器可以自然地处理click事件,从而避免了任何代码怪异:

(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清除表单的类似信息,请参见此处: 重置多阶段表单

您可能还会遇到一个问题,其中Struts值堆栈重新填充了这些值。换句话说,您提交表单,在操作类中执行任何操作,但不清除操作类中的相关字段值。在这种情况下,该表单似乎将保留您先前提交的值。如果要以某种方式保留这些值,则在保留之后并返回SUCCESS之前,只需将操作类中的每个字段值都设置为空即可。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.