我在这里指定了一个非常类似的需求。
我需要有用户的浏览器手动启动下载时$('a#someID').click();
但是我不能用窗户。Href方法,因为它将当前页面内容替换为您试图下载的文件。
相反,我想在新窗口/标签中打开下载。这怎么可能呢?
我在这里指定了一个非常类似的需求。
我需要有用户的浏览器手动启动下载时$('a#someID').click();
但是我不能用窗户。Href方法,因为它将当前页面内容替换为您试图下载的文件。
相反,我想在新窗口/标签中打开下载。这怎么可能呢?
当前回答
如果您已经在使用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');
其他回答
您可以简单地使用HTML中的Download属性。使用优秀的Javascript,你可以使用这个功能直接下载文件。锚标记的download属性应该指向要下载的文件所在的链接。
首先,将URL指向资源路径:
var url = 'your url goes here';
创建一个锚标记,需要的属性如下所示:
var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";
将锚标记附加到网页的body元素。
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();
附加信息:上面的代码没有什么奇特的,只是从Chrome Devtools的控制台工作的客户端JavaScript,但功能强大,也开辟了许多可能性,如网页爬行。
例如,下面这段在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没有提供给你。
我使用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);
最好的部分是它不会在您的服务器上留下任何残留文件,因为一切都是在运行中创建和销毁的!
对我来说,这在chrome v72测试中工作正常
function down_file(url,name){
var a = $("<a>")
.attr("href", url)
.attr("download", name)
.appendTo("body");
a[0].click();
a.remove();
}
down_file('https://www.useotools.com/uploads/nulogo[1].png','logo.png')
这些函数在stacktrace.js中使用:
/**
* Try XHR methods in order and store XHR factory.
*
* @return <Function> XHR function or equivalent
*/
var createXMLHTTPObject = function() {
var xmlhttp, XMLHttpFactories = [
function() {
return new XMLHttpRequest();
}, function() {
return new ActiveXObject('Msxml2.XMLHTTP');
}, function() {
return new ActiveXObject('Msxml3.XMLHTTP');
}, function() {
return new ActiveXObject('Microsoft.XMLHTTP');
}
];
for (var i = 0; i < XMLHttpFactories.length; i++) {
try {
xmlhttp = XMLHttpFactories[i]();
// Use memoization to cache the factory
createXMLHTTPObject = XMLHttpFactories[i];
return xmlhttp;
} catch (e) {
}
}
}
/**
* @return the text from a given URL
*/
function ajax(url) {
var req = createXMLHTTPObject();
if (req) {
try {
req.open('GET', url, false);
req.send(null);
return req.responseText;
} catch (e) {
}
}
return '';
}
我建议您使用mousedown事件,它被称为BEFORE the 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#someID").on('mousedown', function () {
$(this).attr("href", url);
});
});
})(jQuery);