我很惊讶没有很多人知道元素的下载属性。请帮助传播这个消息!你可以有一个隐藏的html链接，假装点击它。如果html链接具有下载属性，它将下载文件，而不是查看文件，无论如何。这是代码。如果能找到猫的图片，它就会下载。

. getelementbyid(“下载”).click (); <a href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download id="download" hidden></a>

注意: 并非所有浏览器都支持:http://www.w3schools.com/tags/att_a_download.asp

我知道我迟到了，但我想分享我的解决方案，这是上面Imagine Breaker解决方案的变化。我试着用他的方法，因为他的方法对我来说是最简单易行的。但就像其他人说的那样，它不适合某些浏览器，所以我使用jquery对它进行了一些修改。

希望这能帮助到那里的人。

function download(url) {
  var link = document.createElement("a");
  $(link).click(function(e) {
    e.preventDefault();
    window.location.href = url;
  });
  $(link).click();
}

使用一个不可见的<iframe>:

<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

为了迫使浏览器下载它本来能够呈现的文件(例如HTML或文本文件)，您需要服务器将文件的MIME Type设置为一个无意义的值，例如application/x-please-download-me或application/octet-stream，这用于任意二进制数据。

如果您只想在一个新选项卡中打开它，唯一的方法是让用户单击目标属性设置为_blank的链接。

jQuery:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

无论何时单击该链接，它都会在一个新的选项卡/窗口中下载文件。

我使用FORM标签有很好的结果，因为它可以在任何地方工作，你不必在服务器上创建临时文件。方法是这样的。

在客户端(页面HTML)，您可以创建这样一个不可见的表单

<form method="POST" action="/download.php" target="_blank" id="downloadForm">
    <input type="hidden" name="data" id="csv">
</form>

然后你添加Javascript代码到你的按钮:

$('#button').click(function() {
     $('#csv').val('---your data---');
     $('#downloadForm').submit();
}

在服务器端，你在download.php中有如下PHP代码:

<?php
header('Content-Type: text/csv');
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=out.csv');
header('Content-Transfer-Encoding: binary');
header('Connection: Keep-Alive');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Length: ' . strlen($data));

echo $_REQUEST['data'];
exit();

你甚至可以像这样创建数据的zip文件:

<?php

$file = tempnam("tmp", "zip");

$zip = new ZipArchive();
$zip->open($file, ZipArchive::OVERWRITE);
$zip->addFromString('test.csv', $_REQUEST['data']);
$zip->close();

header('Content-Type: application/zip');
header('Content-Length: ' . filesize($file));
header('Content-Disposition: attachment; filename="file.zip"');
readfile($file);
unlink($file); 

最好的部分是它不会在您的服务器上留下任何残留文件，因为一切都是在运行中创建和销毁的!

2019现代浏览器更新

这是我现在推荐的方法，但有几点注意事项:

需要一个相对现代的浏览器 如果文件非常大，您可能会采取与原始方法(iframe和cookie)类似的方法，因为以下一些操作可能会消耗至少与正在下载的文件相同大的系统内存和/或其他有趣的CPU副作用。

fetch('https://jsonplaceholder.typicode.com/todos/1') .then(resp => resp.blob()) .then(blob => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; // the filename you want a.download = 'todo-1.json'; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); alert('your file has downloaded!'); // or you know, something with better UX... }) .catch(() => alert('oh no!'));

2012年原创的jQuery/iframe/cookie的方法

我已经创建了jQuery文件下载插件(演示)(GitHub)，这也可以帮助您的情况。它的工作原理与iframe非常相似，但有一些很酷的功能，我发现相当方便:

Very easy to setup with nice visuals (jQuery UI Dialog, but not required), everything is tested too User never leaves the same page they initiated a file download from. This feature is becoming crucial for modern web applications successCallback and failCallback functions allow for you to be explicit about what the user sees in either situation In conjunction with jQuery UI a developer can easily show a modal telling the user that a file download is occurring, disband the modal after the download starts or even inform the user in a friendly manner that an error has occurred. See the Demo for an example of this.

下面是一个简单的用例演示，使用带有承诺的插件源代码。演示页面还包括许多其他“更好的用户体验”示例。

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

Firefox和Chrome测试:

var link = document.createElement('a');
link.download = 'fileName.ext'
link.href = 'http://down.serv/file.ext';

// Because firefox not executing the .click() well
// We need to create mouse event initialization.
var clickEvent = document.createEvent("MouseEvent");
clickEvent.initEvent("click", true, true);

link.dispatchEvent(clickEvent);

这实际上是firefox的“chrome”方式解决方案(我没有在其他浏览器上测试过，所以请留下关于可编译性的评论)