无需离开页面即可打开下载窗口的最简单方法
打开下载对话框的最佳跨浏览器方式是什么（假设我们可以在标题中设置 content-disposion:attachment）而不离开当前页面或打开弹出窗口，这在 Internet Explorer（IE ) 6.
这个 javascript 很好，它不会打开新窗口或标签。
window.location.assign(url);
7年过去了，我不知道它是否适用于IE6，但这会在FF和Chrome中提示OpenFileDialog。
var file_path = 'host/path/file.ext';
var a = document.createElement('A');
a.href = file_path;
a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
Content-Type: application/octet-stream 和 Content-Disposition: attachment。
我知道有人问过这个问题 7 years and 9 months ago，但许多发布的解决方案似乎都不起作用，例如使用 <iframe> 仅适用于 FireFox 而不适用于 Chrome。
最佳解决方案：
在 JavaScript 中打开文件下载弹出窗口的最佳 working solution 是使用 HTML 链接元素，无需将链接元素附加到 document.body 中，如中所述其他答案。
您可以使用以下功能：
function downloadFile(filePath){
var link=document.createElement('a');
link.href = filePath;
link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
link.click();
}
在我的应用程序中，我以这种方式使用它：
downloadFile('report/xls/myCustomReport.xlsx');
工作演示：
函数 downloadFile(filePath) { var link = document.createElement('a');链接.href = 文件路径； link.download = filePath.substr(filePath.lastIndexOf('/') + 1);链接.click(); } 下载文件（“http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf”）；
笔记：
您必须使用 link.download 属性，以便浏览器不会在新选项卡中打开文件并触发下载弹出窗口。
这已使用多种文件类型（docx、xlsx、png、pdf、...）进行了测试。
link 单击时显示此 gif 动画并在超时后将其隐藏，使用以下代码：link.onclick = function() { document.body.innerText = "The file is being downloaded ..."; setTimeout(function() { document.body.innerText = ""; }, 2000); }，您可以看到它在 in this fiddle 工作，但请记住，这不是推荐的方法，如果我们使用 Ajax 会更好地处理。
document.createElement() 的过程中会中断其他事情。如果我清理它们，该方法仍然有效。
我总是在下载链接中添加一个 target="_blank"。这将打开一个新窗口，但是一旦用户单击保存，新窗口就会关闭。
将其放在 HTML 头部部分，将 url 变量设置为要下载的文件的 URL：
<script type="text/javascript">
function startDownload()
{
var url='http://server/folder/file.ext';
window.open(url, 'Download');
}
</script>
然后把这个放到body里面，5秒后会自动开始下载：
<script type="text/javascript">
setTimeout('startDownload()', 5000); //starts download after 5 seconds
</script>
（来自 here。）
正如这个问题所暗示的那样，我一直在寻找一种使用 javascript 来启动文件下载的好方法。然而，这些答案没有帮助。然后我做了一些 xbrowser 测试，发现 iframe 在所有现代浏览器 IE>8 上效果最好。
downloadUrl = "http://example.com/download/file.zip";
var downloadFrame = document.createElement("iframe");
downloadFrame.setAttribute('src',downloadUrl);
downloadFrame.setAttribute('class',"screenReaderText");
document.body.appendChild(downloadFrame);
class="screenReaderText" 是我的课程，用于对存在但不可见的内容进行样式设置。
CSS：
.screenReaderText {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
与 html5boilerplate 中的 .visuallyHidden 相同
我更喜欢这个 javascript window.open 方法，因为如果链接被破坏，iframe 方法根本不会做任何事情，而不是重定向到一个空白页面，说文件无法打开。
window.open(downloadUrl, 'download_window', 'toolbar=0,location=no,directories=0,status=0,scrollbars=0,resizeable=0,width=1,height=1,top=0,left=0');
window.focus();
使用 HTML5 Blob 对象 URL 文件 API：
/**
* Save a text as file using HTML <a> temporary element and Blob
* @see https://stackoverflow.com/questions/49988202/macos-webview-download-a-html5-blob-file
* @param fileName String
* @param fileContents String JSON String
* @author Loreto Parisi
*/
var saveBlobAsFile = function(fileName,fileContents) {
if(typeof(Blob)!='undefined') { // using Blob
var textFileAsBlob = new Blob([fileContents], { type: 'text/plain' });
var downloadLink = document.createElement("a");
downloadLink.download = fileName;
if (window.webkitURL != null) {
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else {
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = document.body.removeChild(event.target);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
} else {
var pp = document.createElement('a');
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
pp.setAttribute('download', fileName);
pp.onclick = document.body.removeChild(event.target);
pp.click();
}
}//saveBlobAsFile
URL.revokeObjectURL(url) 也是一个好习惯
修改窗口的位置可能会导致一些问题，尤其是当您有像 websocket 这样的持久连接时。所以我总是求助于好的旧 iframe 解决方案。
HTML
<input type="button" onclick="downloadButtonClicked()" value="Download"/>
...
...
...
<iframe style="display:none;" name="hiddenIframe" id="hiddenIframe"></iframe>
Javascript
function downloadButtonClicked() {
// Simulate a link click
var url = 'your_download_url_here';
var elem = document.createElement('a');
elem.href = url;
elem.target = 'hiddenIframe';
elem.click();
}
如果链接指向有效的文件 url，只需分配 window.location.href 即可。
但是，有时链接无效，需要 iFrame。
执行正常的 event.preventDefault 以防止窗口打开，如果您使用的是 jQuery，这将起作用：
$('<iframe>').attr('src', downloadThing.attr('href')).appendTo('body').on("load", function() {
$(this).remove();
});
根据新 chrome 规范的最佳解决方案 https://developers.google.com/web/updates/2018/02/chrome-65-deprecations
香草 JavaScript
public static downloadFile(url: string): void {
const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = () => {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
const blobUrl = window.URL.createObjectURL(xmlHttp.response);
const e = document.createElement('a');
e.href = blobUrl;
e.download = blobUrl.substr(blobUrl.lastIndexOf('/') + 1);
document.body.appendChild(e);
e.click();
document.body.removeChild(e);
}
};
xmlHttp.responseType = 'blob';
xmlHttp.open('GET', url, true);
xmlHttp.send(null);
}
如果你使用角度试试这个。
async downloadBrochure(url: string) {
try {
const res = await this.httpClient.get(url, { responseType: 'blob' }).toPromise();
this.downloadFile(res);
} catch (e) {
console.log(e.body.message);
}
}
downloadFile(data) {
const url = window.URL.createObjectURL(data);
const e = document.createElement('a');
e.href = url;
e.download = url.substr(url.lastIndexOf('/') + 1);
document.body.appendChild(e);
e.click();
document.body.removeChild(e);
}
经过数小时的尝试，该功能诞生了 :) 我有一个场景，我必须在文件准备下载时及时显示加载程序：
在 Chrome、Safari 和 Firefox 中工作
function ajaxDownload(url, filename = 'file', method = 'get', data = {}, callbackSuccess = () => {}, callbackFail = () => {}) {
$.ajax({
url: url,
method: 'GET',
xhrFields: {
responseType: 'blob'
},
success: function (data) {
// create link element
let a = document.createElement('a'),
url = window.URL.createObjectURL(data);
// initialize
a.href = url;
a.download = filename;
// append element to the body,
// a must, due to Firefox
document.body.appendChild(a);
// trigger download
a.click();
// delay a bit deletion of the element
setTimeout(function(){
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}, 100);
// invoke callback if any
callbackSuccess(data);
},
error: function (err) {
// invoke fail callback if any
callbackFail(err)
}
});
怎么样：
<meta http-equiv="refresh" content="5;url=http://site.com/file.ext">
这种方式适用于所有浏览器（我认为），并让您输入如下消息：“如果下载在五秒钟内没有开始，请单击此处。”
如果你需要它与javascript一起使用......好吧......
document.write('<meta http-equiv="refresh" content="5;url=http://site.com/file.ext">');
问候
一个小的/隐藏的 iframe 可以用于此目的。
这样您就不必担心关闭弹出窗口。
