使用 JavaScript/jQuery 下载文件
使用隐形<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-me
或application/octet-stream
,该值用于任意二进制数据。
如果您只想在新选项卡中打开它,唯一的方法是让用户单击其target
属性设置为的链接_blank
。
在 jQuery 中:
$('a#someID').attr({target: '_blank',
href : 'http://localhost/directory/file.pdf'});
每当单击该链接时,它都会在新选项卡/窗口中下载文件。
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!'); });
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
我很惊讶没有多少人知道元素的下载属性。请帮忙宣传一下!你可以有一个隐藏的 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