使用 JavaScript/jQuery 下载文件

IT技术 javascript jquery download
2021-02-04 21:21:49

在此处指定一个非常相似的要求

我需要让用户的浏览器手动开始下载 $('a#someID').click();

但是我不能使用该window.href方法,因为它会用您尝试下载的文件替换当前页面内容。

相反,我想在新窗口/选项卡中打开下载。这怎么可能?

6个回答

使用隐形<iframe>

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

要强制浏览器下载原本可以呈现的文件(例如 HTML 或文本文件),您需要服务器将文件的MIME 类型设置为无意义的值,例如application/x-please-download-meapplication/octet-stream,该值用于任意二进制数据。

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

在 jQuery 中:

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

每当单击该链接时,它都会在新选项卡/窗口中下载文件。

如何在没有服务器的情况下强制下载?所以只是一个带有一些 javascript 的 html 页面。
2021-03-13 21:21:49
做得很好!很好的解决了问题。但是,您可能想要使用:iframe.style.display = 'none'; 因为这将完全隐藏 iframe。您当前的实现将使 iframe 不可见,但 iframe 仍会占用页面底部的空间,从而导致额外的空白。
2021-03-19 21:21:49
网页无法自动打开新标签页。强制浏览器下载,让服务器发送带有无意义MIME类型的pdf文件,例如application/x-please-download-me
2021-03-20 21:21:49
不错的片段。然而,设置一个无意义的东西类型有点令人不安。要让浏览器下载它可以渲染的文件,请使用以下标题:(Content-Disposition: attachment; filename="downloaded.pdf"当然,您可以根据需要自定义文件名)。
2021-03-28 21:21:49
它“半”对我有用。我创建了以下简单的测试 html:<html><body><iframe src="fileurl"></iframe></body></html> 并且它确实被下载了,但是在 chrome 控制台中我看到下载被“取消”并显示为红色。这是一个更大的移动网络应用程序的一部分,它被取消的事实破坏了应用程序,因为它引发了一般的网络故障。有什么办法解决这个问题吗?
2021-03-31 21:21:49

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 文件下载插件( Demo ) ( GitHub ),它也可以帮助您解决问题。它与 iframe 的工作方式非常相似,但有一些很酷的功能,我发现这些功能非常方便:

  • 非常容易设置,具有漂亮的视觉效果(jQuery UI 对话框,但不是必需的),一切都经过测试

  • 用户永远不会离开他们启动文件下载的同一页面。此功能对于现代 Web 应用程序变得至关重要

  • successCallback 和 failCallback 函数允许您明确说明用户在任一情况下看到的内容

  • 结合 jQuery UI,开发人员可以轻松地向用户显示一个模式,告诉用户正在下载文件,在下载开始后解除模式,甚至以友好的方式通知用户发生了错误。有关此示例,请参见演示希望这对某人有帮助!

这是一个使用带有 promise的插件的简单用例演示演示页包含了许多其他“更好的UX”的例子也是如此。

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });
关于你的现代示例,如果你想避免添加这个(老实说)不太好的代码,有几个轻量级的包可以为你做到这一点。我最喜欢的是 'fs-browsers' - npmjs.com/package/fs-browsers
2021-03-28 21:21:49
@MarkAmery 也如其他答案所示。这种方法 (AFAIK) 不会为您提供有关下载何时开始、何时完成以及是否出错的反馈,这很方便。我可以将其添加到“即发即弃”选项的答案中。此外,[download] 属性也不允许 POST 或任何异国情调的东西。
2021-04-02 21:21:49
你在这里的现代例子在我看来没有多大意义。为什么要通过从真正的 HTTPS URL 下载某些内容,从中fetch创建一个 blob,从 blob 创建一个 blob URL,然后使用具有download属性的锚点从 blob URL 下载,而您可以改为……使用具有download从您开始使用的 HTTPS URL 下载属性的锚点
2021-04-04 21:21:49
你的现代例子不太正确。无论服务器返回什么,它都会“下载”。例如,如果您遇到身份验证错误,它将返回登录页面或服务器返回的任何内容,而不是“下载的文件”本身。
2021-04-08 21:21:49
function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    // If you don't know the name or want to use
    // the webserver default set name = ''
    link.setAttribute('download', name);
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    link.remove();
}

检查您的目标浏览器是否可以顺利运行上述代码段:http :
//caniuse.com/#feat=download

您也link.download = ""可以让它保留其原始文件名并避免必须设置一个。
2021-03-20 21:21:49
正如在caniuse.com/#feat=download 中提到的,这仅适用于最近的 Firefox 和 Chrome 版本上的同源链接。因此,如果您的链接指向另一个域,则目前几乎无法在任何地方使用。
2021-03-28 21:21:49
下载文件名没有改变... 2015 年 4 月在 chrome 中测试
2021-03-30 21:21:49
对我来说,这将是完美的,但它也不适用于 Firefox。任何的想法?
2021-04-03 21:21:49
要让它在 Firefox 上工作,请document.body.appendChild(link)在点击之前和点击之后执行,link.remove()以避免污染 DOM。
2021-04-07 21:21:49

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

document.getElementById('download').click();
<a href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download id="download" hidden></a>

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

IE 和 Safari 不支持
2021-03-11 21:21:49
Chrome 不下载mp4s
2021-03-15 21:21:49
Chrome 下载,但 Firefox 只显示图片。
2021-03-20 21:21:49
最新的 Chrome(2018 年 8 月)也显示图片(由于荒谬的安全限制)所以失败
2021-03-25 21:21:49
+1 用于提供该可执行代码段。节省了我测试它的时间,却发现它不起作用。
2021-04-04 21:21:49

我建议使用download属性进行下载,而不是jQuery的:

<a href="your_link" download> file_name </a>

这将下载您的文件,而无需打开它。

但是如果我们需要通过链接传递有效载荷怎么办?
2021-03-10 21:21:49
边缘 >= 13,不是 IE。Edge 13 的实现也有问题,因为文件名被忽略,取而代之的是一个以 id 作为名称的文件。
2021-03-14 21:21:49
它将只支持 Chrome、Firefox、Opera 和 IE (>= 13.0)
2021-03-19 21:21:49
在我看来,这是对问题的正确答案。如果您必须支持较旧的浏览器并需要解决方法,则其他答案是有意义的。
2021-04-07 21:21:49