blocks|key|2063835|text|我建议在页面上创建一个不可见的iframe，并将它的src设置为您从服务器收到的url+-下载将在不重新加载页面的情况下开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2063836|或者您可以将当前的document.location.href设置为接收到的url地址。但是，如果请求的文档实际上不存在，这可能会导致用户看到错误。|2063837|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|$]]

I suggest to make an invisible iframe on the page and set it's src to url that you've received from the server - download will start without page reloading.

Or you can just set the current document.location.href to received url address. But that's can cause for user to see an error if the requested document actually does not exists.

blocks|key|2064126|text|A同意maxnk提到的方法，但是您可能希望重新考虑尝试自动强制浏览器下载URL。它可能适用于二进制文件，但对于其他类型的文件(文本、PDF、图像、视频)，浏览器可能希望在窗口(或IFRAME)中呈现它，而不是保存到磁盘。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2064127|如果确实需要进行Ajax调用来获得最终的下载链接，那么使用DHTML将下载链接(从ajax响应)动态地写出到页面中会怎么样呢？这样，用户可以点击它来下载(如果是二进制文件)或在浏览器中查看-或者选择链接上的“另存为”保存到磁盘。这是一个额外的点击，但用户有更多的控制。|2064128|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 agree with the methods mentioned by maxnk, however you may want to reconsider trying to automatically force the browser to download the URL. It may work fine for binary files but for other types of files (text, PDF, images, video), the browser may want to render it in the window (or IFRAME) rather than saving to disk.

If you really do need to make an Ajax call to get the final download links, what about using DHTML to dynamically write out the download link (from the ajax response) into the page? That way the user could either click on it to download (if binary) or view in their browser - or select "Save As" on the link to save to disk. It's an extra click, but the user has more control.

blocks|key|2064198|text|我建议window.open()打开一个弹出窗口。如果这是一个下载，将没有窗口，您将获得您的文件。如果存在404或其他值，用户将在新窗口中看到它(因此，他们的工作不会受到影响，但仍然会收到一条错误消息)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2064199|entityMap^0|3|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I'd suggest <code>window.open()</code> to open a popup window. If it's a download, there will be no window and you will get your file. If there is a 404 or something, the user will see it in a new window (hence, their work will not be bothered, but they will still get an error message).

blocks|key|2064234|text|如果这是您自己的服务器应用程序，那么我建议使用以下标头|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2064235|Content-disposition:+attachment;+filename=fname.ext|code-block|syntax|javascript|2064236|这将强制任何浏览器下载该文件，并且不在浏览器窗口中呈现它。|2064237|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If this is your own server application then i suggest using the following header

<pre><code>Content-disposition: attachment; filename=fname.ext
</code></pre>

This will force any browser to download the file and not render it in the browser window.

blocks|key|1850290|text|只需从javascript调用window.location.href+=+new_url，它就会将浏览器重定向到用户在地址栏中键入该地址|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1850291|entityMap^0|F|U|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Just call <code>window.location.href = new_url</code> from your javascript and it will redirect the browser to that URL as it the user had typed that into the address bar

blocks|key|2064427|text|我们这样做:首先添加这个脚本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2064428|<script+type="text/javascript">
function+populateIframe(id,path)+
{
++++var+ifrm+=+document.getElementById(id);
++++ifrm.src+=+"download.php?path="%2Bpath;
}
</script>|code-block|syntax|javascript|2064429|把它放在你想要的下载按钮的位置(这里我们只用了一个链接)：|2064430|<iframe+id="frame1"+style="display:none"></iframe>
<a+href="javascript:populateIframe('frame1','<?php+echo+$path;+?>')">download</a>|2064431|文件'download.php‘(需要放在你的服务器上)只包含：|2064432|<?php+
+++header("Content-Type:+application/octet-stream");
+++header("Content-Disposition:+attachment;+filename=".$_GET['path']);
+++readfile($_GET['path']);
?>|2064433|所以当你点击链接时，隐藏的iframe会获取/打开源文件'download.php‘。将path作为get参数。我们认为这是最好的解决方案！|2064434|应该注意的是，此解决方案的PHP部分是一个简单的演示，可能非常不安全。它允许用户下载任何文件，而不仅仅是一个预定义的文件集。这意味着他们可以下载网站本身的部分源代码，可能包含API凭证等。|2064435|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

We do it that way:
First add this script.

<pre><code>&lt;script type="text/javascript"&gt;
function populateIframe(id,path) 
{
 var ifrm = document.getElementById(id);
 ifrm.src = "download.php?path="+path;
}
&lt;/script&gt;
</code></pre>

Place this where you want the download button(here we use just a link):

<pre><code>&lt;iframe id="frame1" style="display:none"&gt;&lt;/iframe&gt;
&lt;a href="javascript:populateIframe('frame1','&lt;?php echo $path; ?&gt;')"&gt;download&lt;/a&gt;
</code></pre>

The file 'download.php' (needs to be put on your server) simply contains:

<pre><code>&lt;?php 
 header("Content-Type: application/octet-stream");
 header("Content-Disposition: attachment; filename=".$_GET['path']);
 readfile($_GET['path']);
?&gt;
</code></pre>

So when you click the link, the hidden iframe then gets/opens the sourcefile 'download.php'. With the path as get parameter. 
We think this is the best solution!

It should be noted that the PHP part of this solution is a simple demonstration and potentially very, very insecure. It allows the user to download any file, not just a pre-defined set. That means they could download parts of the source code of the site itself, possibly containing API credentials etc.

blocks|key|1850505|text|阅读答案-包括接受的答案-我想指出通过GET直接将路径传递到readfile的安全含义。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1850506|对某些人来说，这似乎是显而易见的，但有些人可能只是简单地复制/粘贴以下代码：|1850507|<?php+
+++header("Content-Type:+application/octet-stream");
+++header("Content-Disposition:+attachment;+filename=".$_GET['path']);
+++readfile($_GET['path']);
?>|code-block|syntax|javascript|1850508|那么，如果我将类似于'/path/+to+/fileWithSecrets‘的内容传递给这个脚本，会发生什么呢？给定的脚本将愉快地发送webserver用户有权访问的任何文件。|1850509|有关如何防止这种情况的信息，请参阅此讨论：How+do+I+make+sure+a+file+path+is+within+a+given+subdirectory?|offset|length|1850510|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/456546/how-do-i-make-sure-a-file-path-is-within-a-given-subdirectory^0|0|0|0|0|L|1Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Reading the answers - including the accepted one I'd like to point out the security implications of passing a path directly to readfile via GET. 

It may seem obvious to some but some may simply copy/paste this code:

<pre><code>&lt;?php 
 header("Content-Type: application/octet-stream");
 header("Content-Disposition: attachment; filename=".$_GET['path']);
 readfile($_GET['path']);
?&gt;
</code></pre>

So what happens if I pass something like '/path/to/fileWithSecrets' to this script?
The given script will happily send any file the webserver-user has access to.

Please refer to this discussion for information how to prevent this: <a href="https://stackoverflow.com/questions/456546/how-do-i-make-sure-a-file-path-is-within-a-given-subdirectory">How do I make sure a file path is within a given subdirectory?</a>

blocks|key|1850550|text|当你所需要的只是将浏览器重定向到不同的window.location.href时，你为什么还要做服务器端的东西呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1850551|下面是解析?file=+QueryString+(taken+from+this+question)并在1秒内将用户重定向到该地址的代码(我甚至可以在安卓浏览器上使用)：|offset|length|1850552|<script+type="text/javascript">
++++var+urlParams;
++++(window.onpopstate+=+function+()+{
++++++++var+match,
++++++++pl+=+/\%2B/g,++//+Regex+for+replacing+addition+symbol+with+a+space
++++++++search+=+/([%5E&=]%2B)=?([%5E&]*)/g,
++++++++decode+=+function+(s)+{+return+decodeURIComponent(s.replace(pl,+"+"));+},
++++++++query+=+window.location.search.substring(1);

++++++++urlParams+=+{};
++++++++while+(match+=+search.exec(query))
++++++++++++urlParams[decode(match[1])]+=+decode(match[2]);
++++})();

++++(window.onload+=+function()+{
++++++++var+path+=+urlParams["file"];
++++++++setTimeout(function()+{+document.location.href+=+path;+},+1000);
++++});
</script>|code-block|syntax|javascript|1850553|如果你的项目中有函数，一定要删除那些函数&+window.onload处理程序，然后在$(+jQuery+).ready(+window.onpopstate+()+{})中做所有的事情；|1850554|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/2880929^0|0|P|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Why are you making server side stuff when all you need is to redirect browser to different window.location.href?

Here is code that parses ?file= QueryString (<a href="https://stackoverflow.com/a/2880929">taken from this question</a>) and redirects user to that address in 1 second (works for me even on Android browsers):

<pre><code>&lt;script type="text/javascript"&gt;
 var urlParams;
 (window.onpopstate = function () {
 var match,
 pl = /\+/g, // Regex for replacing addition symbol with a space
 search = /([^&amp;=]+)=?([^&amp;]*)/g,
 decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
 query = window.location.search.substring(1);

 urlParams = {};
 while (match = search.exec(query))
 urlParams[decode(match[1])] = decode(match[2]);
 })();

 (window.onload = function() {
 var path = urlParams["file"];
 setTimeout(function() { document.location.href = path; }, 1000);
 });
&lt;/script&gt;
</code></pre>

If you have jQuery in your project definitely remove those window.onpopstate &amp; window.onload handlers and do everything in $(document).ready(function () { } );

blocks|key|1850579|text|尝试这个库https://github.com/PixelsCommander/Download-File-JS它比前面描述的所有解决方案都更现代，因为它使用了"download“属性和方法组合来带来最好的体验。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1850580|在此解释-+http://pixelscommander.com/en/javascript/javascript-file-downliading-ignore-content-type/|1850581|这似乎是在JavaScript中开始下载的理想代码。|1850582|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/PixelsCommander/Download-File-JS|1|http://pixelscommander.com/en/javascript/javascript-file-downliading-ignore-content-type/^0|5|1F|0|0|6|2H|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

Try this lib <a href="https://github.com/PixelsCommander/Download-File-JS" rel="nofollow">https://github.com/PixelsCommander/Download-File-JS</a> it`s more modern than all solutions described before because uses "download" attribute and combination of methods to bring best possible experience.

Explained here - <a href="http://pixelscommander.com/en/javascript/javascript-file-downliading-ignore-content-type/" rel="nofollow">http://pixelscommander.com/en/javascript/javascript-file-downliading-ignore-content-type/</a>

Seems to be ideal piece of code for starting downloading in JavaScript.

blocks|key|1850617|text|要绕过排名靠前的答案中的安全缺陷，您可以将iframe+src直接设置为您想要的文件(而不是中间的php文件)，并在.htaccess文件中设置头信息：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1850618|<Files+*.apk>
+++++ForceType+application/force-download
+++++Header+set+Content-Disposition+attachment
+++++Header+set+Content-Type+application/vnd.android.package-archive
+++++Header+set+Content-Transfer-Encoding+binary
</Files>|code-block|syntax|javascript|1850619|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|$]]

To get around the security flaw in the top-voted answer, you can set the iframe src directly to the file you want (instead of an intermediate php file) and set the header information in an .htaccess file:

<pre><code>&lt;Files *.apk&gt;
 ForceType application/force-download
 Header set Content-Disposition attachment
 Header set Content-Type application/vnd.android.package-archive
 Header set Content-Transfer-Encoding binary
&lt;/Files&gt;
</code></pre>

blocks|key|1850654|text|关于最上面的答案，我有一个可能的安全风险解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1850655|<?php
+++++if(isset($_GET['path'])){
+++++++++if(in_array($_GET['path'],+glob("*/*.*"))){
+++++++++++++header("Content-Type:+application/octet-stream");
+++++++++++++header("Content-Disposition:+attachment;+filename=".$_GET['path']);
+++++++++++++readfile($_GET['path']);
+++++++++}
+++++}
?>|code-block|syntax|javascript|1850656|使用glob()函数(我在要下载的文件的上一个文件夹中测试了下载文件)，我能够快速生成一个“允许”下载的文件数组，并根据它检查传递的路径。这不仅可以确保被抓取的文件不是敏感文件，而且还可以同时检查文件的存在。|1850657|~注意:+Javascript+/+HTML~|1850658|HTML：|1850659|<iframe+id="download"+style="display:none"></iframe>|1850660|和|1850661|<input+type="submit"+value="Download"+onclick="ChangeSource('document_path');return+false;">|1850662|JavaScript：|1850663|<script+type="text/javascript">
++++
</script>|1850664|entityMap^0|0|0|0|0|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|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|15|8|@]|9|@]|A|$E|F]]|$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|$]]

In relation to the top answer I have a possible solution to the security risk.

<pre><code>&lt;?php
 if(isset($_GET['path'])){
 if(in_array($_GET['path'], glob("*/*.*"))){
 header("Content-Type: application/octet-stream");
 header("Content-Disposition: attachment; filename=".$_GET['path']);
 readfile($_GET['path']);
 }
 }
?&gt;
</code></pre>

Using the glob() function (I tested the download file in a path one folder up from the file to be downloaded) I was able to make a quick array of files that are "allowed" to be downloaded and checked the passed path against it. Not only does this insure that the file being grabbed isn't something sensitive but also checks on the files existence at the same time.

~Note: Javascript / HTML~

HTML:

<pre><code>&lt;iframe id="download" style="display:none"&gt;&lt;/iframe&gt;
</code></pre>

and

<pre><code>&lt;input type="submit" value="Download" onclick="ChangeSource('document_path');return false;"&gt;
</code></pre>

JavaScript:

<pre><code>&lt;script type="text/javascript"&gt;
 &lt;!--
 function ChangeSource(path){
 document.getElementByID('download').src = 'path_to_php?path=' + document_path;
 }
 --&gt;
&lt;/script&gt;
</code></pre>

Let's say I have download links for files on my site. 

When clicked these links send an AJAX request to the server which returns the URL with the location of the file. 

What I want to do is direct the browser to download the file when the response gets back. Is there a portable way to do this?

starting file download with JavaScript

服务器

jQuery

假设我的网站上有文件的下载链接。单击这些链接时，将向服务器发送一个AJAX请求，服务器将返回带有文件位置的URL。我想要做的是，当响应返回时，让浏览器下载文件。有没有一种便携的方法可以做到这一点？

问使用JavaScript启动文件下载
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript启动文件下载EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript启动文件下载
EN