打开下载窗口的最简单方法，而不用从页面导航离开

小开

将其放在 HTML head 部分，将 url变量设置为要下载的文件的 URL:

<script type="text/javascript">
function startDownload()
{
var url='http://server/folder/file.ext';
window.open(url, 'Download');
}
</script>

然后把这个放到主体中，5秒钟后它会自动开始下载:

<script type="text/javascript">
setTimeout('startDownload()', 5000); //starts download after 5 seconds
</script>

(来自给你)

小开

这个怎么样:

<meta http-equiv="refresh" content="5;url=http://site.com/file.ext">

这种方法适用于所有的浏览器(我认为) ，并且可以让你输入类似这样的信息: “如果下载在5秒内没有开始，请点击这里。”

如果你需要它与 javascript. . 好..。

document.write('<meta http-equiv="refresh" content="5;url=http://site.com/file.ext">');

问候

小开

我总是在下载链接中添加 target = “ _ black”。这将打开一个新窗口，但是当用户单击“保存”时，新窗口将关闭。

小开

一个小的/隐藏的 iframe 可以为此目的工作。

这样你就不用担心关门了。

小开

这个 javascript 很好，它不会打开一个新的窗口或选项卡。

window.location.assign(url);

小开

我一直在寻找一种使用 javascript 启动文件下载的好方法，正如这个问题所暗示的那样。然而，这些答案并没有帮助。然后我做了一些 x 浏览器测试，发现 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;
}

和隐藏在 html5样板中的视觉效果一样

相对于 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();

小开

如果链接指向一个有效的文件 url，那么简单地分配 window.location.href 就可以了。

但是，有时链接无效，需要一个 iFrame。

执行您的常规 event. proventDefault 以防止窗口打开，如果您正在使用 jQuery，这将工作:

$('<iframe>').attr('src', downloadThing.attr('href')).appendTo('body').on("load", function() {
$(this).remove();
});

小开

修改窗口的位置可能会导致一些问题，特别是当您有一个像 websocket 这样的持久连接时。所以我总是求助于旧的 iframe 解决方案。

超文本标示语言

<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();
}

小开

最佳答案

七年过去了我不知道它是否适用于 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);

小开

我知道这个问题是问 7 years and 9 months ago，但许多张贴的解决方案似乎不工作，例如，使用 <iframe>工程只与 FireFox和不与 Chrome。

最佳解决方案:

在 JavaScript中打开文件下载弹出窗口的最佳工作解决方案是使用 HTML链接元素，如其他答案中所述的 不需要将 link 元素附加到 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');

工作演示:

function downloadFile(filePath) {
var link = document.createElement('a');
link.href = filePath;
link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
link.click();
}


downloadFile("http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf");

注:

您必须使用 link.download属性，这样浏览器就不会在一个新的选项卡中打开文件并触发下载弹出窗口。
这是用几种文件类型(docx、 xlsx、 png、 pdf、 ...)测试的。

小开

使用 HTML5团团对象-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

/**
* 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


var jsonObject = {
"name": "John",
"age": 31,
"city": "New York"
};
var fileContents = JSON.stringify(jsonObject, null, 2);
var fileName = "data.json";


saveBlobAsFile(fileName, fileContents)

小开

经过几个小时的尝试，这个函数诞生了:)我有一个场景，当文件准备下载时，我必须及时显示加载程序:

在 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)
}
});

小开

最佳解决方案根据新的铬规格 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);
}