blocks|key|1516465|text|7年过去了，我不知道它是否适用于IE6，但这提示了FF和Chrome中的OpenFileDialog。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1516466|var+file_path+=+'host/path/file.ext';
var+a+=+document.createElement('A');
a.href+=+file_path;
a.download+=+file_path.substr(file_path.lastIndexOf('/')+%2B+1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);|code-block|syntax|javascript|1516467|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

7 years have passed and
I don't know whether it works for IE6 or not, but this prompts OpenFileDialog in FF and Chrome.

<pre><code>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);
</code></pre>

blocks|key|1516270|text|这个javascript很好，因为它不会打开新的窗口或标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1516271|window.location.assign(url);|code-block|syntax|javascript|1516272|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This javascript is nice that it doesn't open a new window or tab.

<pre><code>window.location.assign(url);
</code></pre>

blocks|key|1301267|text|我总是在下载链接中添加一个target="_blank“。这将打开一个新窗口，但只要用户单击保存，新窗口就会关闭。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1301268|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I always add a target="_blank" to the download link. This will open a new window, but as soon as the user clicks save, the new window is closed.

blocks|key|1301193|text|将此代码放入HTML+head部分，将URL设置为要下载的文件的url：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1301194|<script+type="text/javascript">++
function+startDownload()++
{++
+++++var+url='http://server/folder/file.ext';++++
+++++window.open(url,+'Download');++
}++
</script>|code-block|syntax|javascript|1301195|然后将其放入body中，它将在5秒后自动开始下载：|1301196|<script+type="text/javascript">++
setTimeout('startDownload()',+5000);+//starts+download+after+5+seconds++
</script>+|1301197|(来自here。)|1301198|entityMap|0|LINK|mutability|MUTABLE|url|http://www.dslreports.com/forum/r21478709-^0|W|3|0|0|0|0|3|4|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|Q|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

Put this in the HTML head section, setting the <code>url</code> var to the URL of the file to be downloaded:

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

Then put this in the body, which will start the download automatically after 5 seconds:

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

(From <a href="http://www.dslreports.com/forum/r21478709-" rel="noreferrer">here</a>.)

blocks|key|1516366|text|我一直在寻找一种使用javascript启动文件下载的好方法，就像这个问题所暗示的那样。然而，这些答案并没有什么帮助。然后我做了一些xbrowser测试，发现iframe在所有现代浏览器IE>8上工作得最好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1516367|downloadUrl+=+"http://example.com/download/file.zip";
var+downloadFrame+=+document.createElement("iframe");+
downloadFrame.setAttribute('src',downloadUrl);
downloadFrame.setAttribute('class',"screenReaderText");+
document.body.appendChild(downloadFrame);+|code-block|syntax|javascript|1516368|class="screenReaderText"是我的类，用于设置存在但不可见的内容的样式。|offset|length|style|CODE|1516369|css：|1516370|.screenReaderText+{+
++border:+0;+
++clip:+rect(0+0+0+0);+
++height:+1px;+
++margin:+-1px;+
++overflow:+hidden;+
++padding:+0;+
++position:+absolute;+
++width:+1px;+
}|1516371|与html5boilerplate中的.visuallyHidden相同|1516372|与javascript的window.open方法相比，我更喜欢这种方法，因为如果链接断开，iframe方法根本不会做任何事情，而不是重定向到一个空白页面，说明文件无法打开。|1516373|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();|1516374|entityMap^0|0|0|0|O|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

I've been looking for a good way to use javascript to initiate the download of a file, just as this question suggests. However these answers not been helpful. I then did some xbrowser testing and have found that an iframe works best on all modern browsers IE>8. 

<pre><code>downloadUrl = "http://example.com/download/file.zip";
var downloadFrame = document.createElement("iframe"); 
downloadFrame.setAttribute('src',downloadUrl);
downloadFrame.setAttribute('class',"screenReaderText"); 
document.body.appendChild(downloadFrame); 
</code></pre>

<code>class="screenReaderText"</code> is my class to style content that is present but not viewable.

css:

<pre><code>.screenReaderText { 
 border: 0; 
 clip: rect(0 0 0 0); 
 height: 1px; 
 margin: -1px; 
 overflow: hidden; 
 padding: 0; 
 position: absolute; 
 width: 1px; 
}
</code></pre>

same as .visuallyHidden in html5boilerplate 

I prefer this to the javascript window.open method because if the link is broken the iframe method simply doesn't do anything as opposed to redirecting to a blank page saying the file could not be opened. 

<pre><code>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();
</code></pre>

blocks|key|1516417|text|如果链接指向有效的文件url，则只需指定window.location.href即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1516418|但是，有时链接无效，需要iFrame。|1516419|执行常规的event.preventDefault以防止窗口打开，如果您使用的是jQuery，这将会起作用：|1516420|$('<iframe>').attr('src',+downloadThing.attr('href')).appendTo('body').on("load",+function()+{
+++$(this).remove();
});|code-block|syntax|javascript|1516421|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If the link is to a valid file url, simply assigning window.location.href will work.

However, sometimes the link is not valid, and an iFrame is required.

Do your normal event.preventDefault to prevent the window from opening, and if you are using jQuery, this will work:

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

blocks|key|1516496|text|符合新的chrome规范https://developers.google.com/web/updates/2018/02/chrome-65-deprecations的最佳解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1516497|香草JavaScript|1516498|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('/')+%2B+1);
+++++++++document.body.appendChild(e);
+++++++++e.click();
+++++++++document.body.removeChild(e);
+++++++}
+++++};
+++++xmlHttp.responseType+=+'blob';
+++++xmlHttp.open('GET',+url,+true);
+++++xmlHttp.send(null);
+++}|code-block|syntax|javascript|1516499|如果你使用的是angular，试试这个。|1516500|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('/')+%2B+1);
++++document.body.appendChild(e);
++++e.click();
++++document.body.removeChild(e);
++}|1516501|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/updates/2018/02/chrome-65-deprecations^0|C|20|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

Best solution as per new chrome specification <a href="https://developers.google.com/web/updates/2018/02/chrome-65-deprecations" rel="nofollow noreferrer">https://developers.google.com/web/updates/2018/02/chrome-65-deprecations</a>
Vanilla JavaScript
<pre><code>public static downloadFile(url: string): void {
 const xmlHttp = new XMLHttpRequest();
 xmlHttp.onreadystatechange = () =&gt; {
 if (xmlHttp.readyState === 4 &amp;&amp; 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);
 }
</code></pre>
If you're using angular try this.
<pre><code>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);
 }
</code></pre>

blocks|key|1301211|text|这样如何：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1301212|<meta+http-equiv="refresh"+content="5;url=http://site.com/file.ext">|code-block|syntax|javascript|1301213|这种方式适用于所有浏览器(我认为)，并允许您放置一条消息，如：“如果下载没有在五秒钟内开始，请单击此处。”|1301214|如果你需要使用javascript..好吧..。|1301215|document.write('<meta+http-equiv="refresh"+content="5;url=http://site.com/file.ext">');|1301216|问候|1301217|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

How about:

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

This way works on all browsers (i think) and let you put a message like: "If the download doesn't start in five seconds, click here."

If you need it to be with javascript.. well...

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

Regards

blocks|key|1516168|text|一个小的/隐藏的iframe可以用于此目的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1516169|这样你就不必担心关闭弹出窗口了。|1516170|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

A small/hidden iframe can work for this purpose. 

That way you don't have to worry about closing the pop up.

What is the best cross browser way to open a download dialog (let's assume we can set content-disposion:attachment in the headers) without navigating away from the current page, or opening popups, which doesn't work well in Internet Explorer(IE) 6.

Easiest way to open a download window without navigating away from the page

在不离开当前页面或打开弹出窗口的情况下，打开下载对话框(假设我们可以在标题中设置content-disposion:attachment )的最佳跨浏览器方式是什么，这在Internet Explorer(IE) 6中不起作用。

问无需离开页面即可打开下载窗口的最简单方法
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无需离开页面即可打开下载窗口的最简单方法EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无需离开页面即可打开下载窗口的最简单方法
EN