使用jQuery下载文件

Question

当用户点击链接时，如何提示下载？

例如，不是：

<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 或其他东西来实现呢？

- Dodinas

---

可能是使用Javascript/jQuery下载文件的重复问题。 - Liam

Answer 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，使用这种方法至少会让用户得到一些反馈。

- karim79

---

谢谢，这就是我想要的。通常我会使用"preventDefault"，只是因为懒而省略了它。;-) - Dodinas

工作得很好，但是会出现一些 MIME 类型错误。不知道有没有什么方法可以解决？ - Nathan Hangen

你解决了 MIME 类型警告吗？我收到了“资源被解释为文档，但传输的 MIME 类型是...”非常感谢。 - user1824269

我很困惑。这怎么还被标记为答案？无论你放什么href，链接都会跟随它。这根本不起作用。 - Grogu

Answer 2

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

如果您只依赖于JavaScript，则一些没有启用JavaScript的用户将无法点击您的链接。

- Rob

---

了解“robots.txt”是很好的。谢谢。 - Dodinas

@Rob，如果您需要URL是“私有的”，那么robots.txt是无法帮助的，因为它仍然会存储在浏览器历史记录和中间服务器中。 - Pacerier

6年后：没有JavaScript的浏览？——好吧，你也可以去散步。 - low_rents

将近10年后：一样！还是？ - toing_toing

Answer 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>

- Kobi

---

这是谷歌网站管理员帮助中心的另一篇文章(http://www.google.com/support/webmasters/bin/answer.py?hl=de&answer=96569)，对我理解"nofollow"或"me" rel有很大帮助。 - 000

Answer 4

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

- EL missaoui habib

---

没有错误，只是下载没有开始。我认为在创建元素时可能有一些细节我忽略了。 - shyammakwana.me

验证您的HTML代码中是否创建了一个<a>元素，并验证您的文件链接。 - EL missaoui habib

页面中有一个标签，点击它可以手动下载图片。然而现在不再需要它了，我使用了这个vanillaJS解决方案。 - shyammakwana.me

没有工作的原因，链接是否正确。请直接在浏览器中测试链接。 - EL missaoui habib

我使用了以下代码： $('blah').each(function(){ $('body').append('<a href="'+xxx+'" download="'+dynamicname+'" />'); }) $('a').trigger('click'); - shyammakwana.me

Answer 5

• 使用jQuery函数

    var valFileDownloadPath = 'http//:'+'your url';

   window.open(valFileDownloadPath , '_blank');

- Ganganath Rathnasekara

---

嗨，这个会打开新标签页，如果不想打开新标签页，点击后直接下载怎么办？已经删除了“_blank”，但没有任何反应。 - mastersuse

Answer 6

是的，你需要将window.location.href更改为你想要下载的文件的URL。

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

- MacAnthony

---

如果文件扩展名是.html，那么它将重定向到该html文件，而不是下载。 - Kaleem Nalband

Answer 7

通过声明 window.location.href = 'uploads/file.doc';，您可以显示文件存储的位置。当然，您也可以使用 .htaccess 强制存储文件所需的行为，但这可能不总是方便的......

最好创建一个服务器端 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 文件来进行下载。

- Otvazhnii

---

这个解决方案帮助我修复了我的网站下载问题，非常感谢！ - Denniz

非常感谢，您的答案解决了我的问题！我尝试了太多的参考资料，但都没有帮助。 - mastersuse

Answer 8

你可以非常容易地使用 HTML5 完成这个操作：

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

- Luca Ziegler

Answer 9

我建议您使用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);

- ling

Answer 10

复制这个

var link = document.createElement('a');
document.body.appendChild(link);
link.setAttribute('download', '');
link.href = URL_HERE;
link.click();
link.remove();

- Сайф Абаза