这很疯狂,但我不知道怎么做,因为这些词太常见了,在搜索引擎上很难找到我需要的东西。我想这个问题应该很容易回答。

我想要一个简单的文件下载,这将与此相同:

<a href="file.doc">Download!</a>

但是我想使用一个HTML按钮,例如:

<input type="button" value="Download!">
<button>Download!</button>

同样,是否有可能通过JavaScript触发一个简单的下载?

$("#fileRequest").click(function(){ /* code to download? */ });

我绝对不会寻找一种方法来创建一个看起来像按钮的锚,使用任何后端脚本,或混乱的服务器头或mime类型。


当前回答

The solution I have come up with is that you can use download attribute in anchor tag but it will only work if your html file is on the server. but you may have a question like while designing a simple html page how can we check that for that you can use VS code live server or bracket live server and you will see your download attribute will work but if you will try to open it simply by just double clicking html page it open the file instead of downloading it. conclusion: attribute download in anchor tag only works if your html file is no server.

其他回答

在我的测试中,以下内容适用于所有文件类型和浏览器,只要你使用相对链接:

<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上进行了测试。

如果你不能使用表单,另一种方法downloadjs很适合。Downloadjs在底层使用blob和html 5文件API:

<div onClick=(()=>{downloadjs(url, filename)})/>

*它是jsx/react语法,但可以在纯HTML中使用

如果你正在寻找一个普通的JavaScript(而不是jQuery)解决方案,并且不使用HTML5属性,你可以试试这个。

const download = document.getElementById("fileRequest"); 下载。addEventListener(“点击”,请求); 函数请求(){ 窗口。Location = 'document.docx'; } .dwnld-cta { 边框半径:15px 15px; 宽度:100 px; 行高:22 px } 下载文件< h1 > < / h1 > <button id="fileRequest" class="dwnld-cta">Download</button> .

The solution I have come up with is that you can use download attribute in anchor tag but it will only work if your html file is on the server. but you may have a question like while designing a simple html page how can we check that for that you can use VS code live server or bracket live server and you will see your download attribute will work but if you will try to open it simply by just double clicking html page it open the file instead of downloading it. conclusion: attribute download in anchor tag only works if your html file is no server.

< a href = " file.doc " > < >按钮下载!< /按钮> < / > 这将下载文件作为。doc文件扩展名不支持在浏览器中打开。 其中一个最简单的方法按钮和文字装饰将有助于改变或删除链接的文字装饰。