这很疯狂,但我不知道怎么做,因为这些词太常见了,在搜索引擎上很难找到我需要的东西。我想这个问题应该很容易回答。
我想要一个简单的文件下载,这将与此相同:
<a href="file.doc">Download!</a>
但是我想使用一个HTML按钮,例如:
<input type="button" value="Download!">
<button>Download!</button>
同样,是否有可能通过JavaScript触发一个简单的下载?
$("#fileRequest").click(function(){ /* code to download? */ });
我绝对不会寻找一种方法来创建一个看起来像按钮的锚,使用任何后端脚本,或混乱的服务器头或mime类型。
您可以使用HTML5 download属性触发下载。
<a href="path_to_file" download="proposed_file_name">Download</a>
地点:
path_to_file是解析为同一源上的URL的路径。这意味着页面和文件必须共享相同的域、子域、协议(HTTP vs. HTTPS)和端口(如果指定了)。例外是blob:和data:(总是工作)和file:(从不工作)。
Proposed_file_name是要保存到的文件名。如果它为空,浏览器默认为文件的名称。
文档:MDN, HTML标准下载,HTML标准下载,CanIUse
在我的测试中,以下内容适用于所有文件类型和浏览器,只要你使用相对链接:
<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>
/assets/hello.txt只是我网站上的一个相对路径。将其更改为您自己的相对路径。
My_file.txt是您希望在下载时调用该文件的名称。
解释
我注意到很多答案下面都有评论说浏览器会根据文件类型来尝试打开文件,而不是下载文件。我发现这是真的。
我用两种不同的方法制作了两个按钮进行测试:
<button onclick="window.location.href='/assets/hello.txt';">Download 1</button>
<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>
注:
按钮1在一个新的浏览器选项卡中打开文本文件。但是,Button 1会下载它自己无法打开的文件类型(例如.apk文件)。
按钮2下载文本文件。但是,如果路径是相对的,按钮2只下载文件。当我将路径更改为绝对路径时,浏览器会在一个新选项卡中打开它。
我在Firefox、Safari和Chrome上进行了测试。