Mit*_*ran 325 javascript jquery download
我在这里指定了非常相似的要求.
我需要让用户的浏览器手动开始下载 $('a#someID').click();
但我无法使用该window.href方法,因为它将当前页面内容替换为您尝试下载的文件.
相反,我想在新窗口/选项卡中打开下载.这怎么可能？
Ran*_*Dev 365
使用不可见的<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'});
只要单击该链接,它就会在新的选项卡/窗口中下载该文件.
Joh*_*ner 174
我已经创建了jQuery文件下载插件(演示)(GitHub),它也可以帮助你的情况.它与iframe的工作方式非常相似,但有一些我发现非常方便的很酷的功能:
很容易设置好的视觉效果(jQuery UI对话,但不是必需的),一切都经过测试
用户永远不会离开他们发起文件下载的同一页面.此功能对于现代Web应用程序变得至关重要
successCallback和failCallback函数允许您明确用户在任一情况下看到的内容
结合jQuery UI,开发人员可以轻松地显示一个模式告诉用户文件下载正在发生,在下载开始后解除模式,甚至以友好的方式通知用户发生了错误.有关此示例,请参阅演示.希望这有助于某人!
这是一个使用带有promises 的插件源的简单用例演示.该演示页面还包含许多其他"更好的用户体验"示例.
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!'));小智 127
function downloadURI(uri, name)
{
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
检查您的目标浏览器是否能顺利运行上述代码段:http:
//caniuse.com/#feat=download
小智 66
我很惊讶没有很多人知道元素的下载属性.请帮忙宣传它!你可以有一个隐藏的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
Lau*_*hes 47
我建议使用html5代替jQuery下载:
<a href="your_link" download> file_name </a>
这将下载您的文件,而无需打开它.
cor*_*cho 20
如果您已经在使用jQuery,那么您可以使用jQuery来生成一个较小的片段
一个jQuery版本的Andrew的答案:
var $idown; // Keep it outside of the function, so it's initialized once.
downloadURL : function(url) {
if ($idown) {
$idown.attr('src',url);
} else {
$idown = $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
}
},
//... How to use it:
downloadURL('http://whatever.com/file.pdf');
EL *_*bib 12
适用于Chrome,Firefox和IE8及更高版本.
var link=document.createElement('a');
document.body.appendChild(link);
link.href=url ;
link.click();
Aar*_*ier 10
使用一个简单的例子 iframe
function downloadURL(url) {
var hiddenIFrameID = 'hiddenDownloader',
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = url;
};
然后只需在任何地方调用函数:
downloadURL('path/to/my/file');
rak*_*oof 10
仅仅七年之后,这里出现了一个使用表单而不是iframe或链接的单行jQuery解决方案:
$('<form></form>')
.attr('action', filePath)
.appendTo('body').submit().remove();
我已经测试了这个
如果有人知道这个解决方案的任何缺点,我会很高兴听到他们.
完整演示:
<html>
<head><script src="https://code.jquery.com/jquery-1.11.3.js"></script></head>
<body>
<script>
var filePath = window.prompt("Enter a file URL","http://jqueryui.com/resources/download/jquery-ui-1.12.1.zip");
$('<form></form>').attr('action', filePath).appendTo('body').submit().remove();
</script>
</body>
</html>
我最终使用了下面的代码片段，它适用于大多数浏览器，但未在 IE 中进行测试。
let data = JSON.stringify([{email: "test@domain.com", name: "test"}, {email: "anothertest@example.com", name: "anothertest"}]);
let type = "application/json", name = "testfile.json";
downloader(data, type, name)
function downloader(data, type, name) {
let blob = new Blob([data], {type});
let url = window.URL.createObjectURL(blob);
downloadURI(url, name);
window.URL.revokeObjectURL(url);
}
function downloadURI(uri, name) {
let link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}function downloadURI(uri, name) {
let link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
function downloader(data, type, name) {
let blob = new Blob([data], {type});
let url = window.URL.createObjectURL(blob);
downloadURI(url, name);
window.URL.revokeObjectURL(url);
}
如果不需要浏览其他页面，这可能会有所帮助。这是基本的javascript函数，因此可以在Javascript后端的任何平台中使用
window.location.assign('any url or file path')
您可以简单地使用 HTML 中的 Download 属性。使用好的 ol' Javascript，您可以使用此功能直接下载文件。锚标记的下载属性应指向要下载的文件所在的链接。
首先，将 URL 指向您的资源路径：
var url = 'your url goes here';
创建一个锚标记，所需属性如下：
var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";
将锚标记附加到网页的正文元素。
document.body.appendChild(elem);
现在以编程方式触发单击事件。单击锚标记将触发下载。
$('#downloadAnchor').click();
把它们放在一起：
var url = 'your url goes here';
var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";
document.body.appendChild(elem);
$('#downloadAnchor').click();
附加信息：上面的代码没有什么特别的，只是客户端 JavaScript，它可以在 Chrome Devtools 的控制台上运行，但是功能强大，并且还提供了很多可能性，例如网页抓取。
例如，在 Devtools 控制台中执行的以下代码块将在新选项卡中打开页面中的所有链接：只需转到此网页，打开 devtools 并在浏览器控制台中运行此脚本，然后观看 JavaScript 的强大功能。（注：以下代码纯粹用于教育目的。）
确保为该站点启用弹出窗口，否则默认的弹出窗口阻止程序将禁用您的锚点点击。
var links = document.getElementsByClassName("_3ATBKe");
for(var i=0;i<links.length;i++){
var title = document.getElementsByClassName("_3ATBKe")[i].firstElementChild.firstElementChild.innerText.replaceAll('|','-').replaceAll(':','x');
console.log('Opening..'+title);
links[i].firstElementChild.click();
}
注意：这不仅限于锚点点击，您几乎可以下载网页上找到的任何内容。如果某些内容（图像、音频、视频）加载到您的网页上，您可能可以编写一个脚本来下载它，即使 UI 没有提供该内容。
我专门为这种情况创建了一个 npm 包（是的，这是我的包，但它非常适合您的情况，所以我很乐意在这里提及它）。
你可以检查一下，看看你是否喜欢它。它称为fs-browsers，并为客户端提供了良好且简单的下载方法。
事情是这样的：
import { downloadFile } from 'fs-browsers';
downloadFile(url-to-the-file);我不知道这个问题是不是太老了，但是只要下载 mime 类型正确（例如 zip 存档），将 window.location 设置为下载 url 就可以了。
var download = function(downloadURL) {
location = downloadURL;
});
download('http://example.com/archive.zip'); //correct usage
download('http://example.com/page.html'); //DON'T
如果您正在寻找描述性的 TypeScript 方法，请查看：
function download(content: string, fileName: string) {
const
blob = new Blob([content], { type: /* some type */ }),
urlForDownload = window.URL.createObjectURL(blob),
const linkElement = document.createElement('a'); // create hyperlink HTML element
linkElement.href = urlForDownload
linkElement.download = fileName
linkElement.click()
URL.revokeObjectURL(urlForDownload) // free memory
}
Blob 对象代表一个 blob，它是不可变的原始数据的类似文件的对象；它们可以作为文本或二进制数据读取，或者转换为 ReadableStream，以便其方法可用于处理数据。
Blob 可以表示不一定是 JavaScript 原生格式的数据。File接口基于Blob，继承了blob功能并将其扩展以支持用户系统上的文件。
| 归档时间： |
|
| 查看次数： |
1031768 次 |
| 最近记录： |