【问题标题】:Download File Using jQuery使用 jQuery 下载文件
【发布时间】:2010-11-20 17:34:01
【问题描述】:

如何在用户点击链接时提示他们下载。

例如,而不是:

<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 或其他东西来完成?

【问题讨论】:

标签: jquery file download


【解决方案1】:

我可能会建议使用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,至少这样用户也会得到一些反馈。

【讨论】:

  • 谢谢,这就是我要找的。我通常使用“preventDefault”,因为我很懒,所以把它放在上面。 ;-)
  • 效果很好,但会出现一些 MIME 类型错误。想知道是否有任何方法可以克服它们?
  • 您解决了 MIME 类型警告吗?我收到“资源解释为文档,但使用 MIME 类型传输...”非常感谢。
【解决方案2】:

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

如果您只依赖 javascript,那么一些不使用它浏览的用户将无法点击您的链接。

【讨论】:

  • 很高兴了解“robots.txt”。谢谢。
  • @Rob,如果您需要将 URL 设为“私有”,robots.txt 将无济于事,因为它仍会存储在浏览器历史记录和中间服务器中。
  • 6 年后:不用 javascript 浏览? - 好吧,你也可以去散步。
  • 将近 10 年后:同样!还是?
【解决方案3】:

这是一篇不错的文章,展示了许多从搜索引擎中隐藏文件的方法:

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

JavaScript 不是不索引页面的好方法;它不会阻止用户直接链接到您的文件(从而将其显示给爬虫),并且正如 Rob 所提到的,它不适用于所有用户。
一个简单的解决方法是添加 rel="nofollow" 属性,但同样,如果没有 robots.txt,它是不完整的。

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

【讨论】:

【解决方案4】:
 var link=document.createElement('a');
 document.body.appendChild(link);
 link.href=url;
 link.click();

【讨论】:

  • 没有错误,只是没有开始下载。我认为在创建元素时可能缺少一些要点。
  • 在您的 html 中验证是否创建了元素 并验证您的文件链接。
  • 有一个标签,在正文中。并通过手动单击它正在下载的图像。但是现在不需要了,我使用了这个 vanillaJS 解决方案。
  • 链接正确没有理由不工作。直接在浏览器中测试链接
  • $('blah').each(function(){ $('body').append('&lt;a href="'+xxx+'" download="'+dynamicname+'" /&gt;'); }) $('a').trigger('click'); 我用过。
【解决方案5】:

是的,您必须将 window.location.href 更改为您要下载的文件的 url。

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

【讨论】:

  • 如果文件扩展名是 .html,它会重定向到那个 html 文件而不是下载。
【解决方案6】:
  • 使用jQuery函数

        var valFileDownloadPath = 'http//:'+'your url';
    
       window.open(valFileDownloadPath , '_blank');
    

【讨论】:

  • 你好,这个会打开新标签,如果不想打开新标签,点击直接下载怎么办?已删除 _blank 但没有任何操作。
【解决方案7】:

通过声明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;

此代码将返回任何文件作为下载而不显示您实际存储它的位置。

你通过window.location.href = 'scripts/this_php_file.php?f=downloaded_file';打开这个php文件

【讨论】:

  • 这个解决方案帮助我解决了我网站上的下载问题,谢谢!
  • 非常感谢,您的回答解决了我的问题!我尝试了太多参考,但没有任何帮助。
【解决方案8】:

Hidden iframes可以帮忙

【讨论】:

  • varredeemFrame = document.createElement("iframe"); var src = "doDownload.php";赎回框架.setAttribute("src",src); resumeFrame.setAttribute("style","display: none"); document.body.appendChild(redeemFrame);
【解决方案9】:

我建议您使用 mousedown 事件,该事件在单击事件之前调用。 这样,浏览器自然地处理点击事件,从而避免了任何代码怪异:

(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);

【讨论】:

    【解决方案10】:

    有关使用 jQuery 清除表单的类似帖子,请参见此处:Resetting a multi-stage form with jQuery

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

    【讨论】:

      【解决方案11】:

      你可以很容易地用 html5 做到这一点:

      var link = document.createElement('a');
      link.href = "/WWW/test.pdf";
      link.download = "file_" + new Date() + ".pdf";
      link.click();
      link.remove();
      

      【讨论】:

        猜你喜欢
        • 2021-12-18
        • 2012-06-25
        • 2020-05-26
        • 1970-01-01
        • 2011-04-05
        • 2013-05-23
        • 2016-04-07
        相关资源
        最近更新 更多