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

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

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

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

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

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

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

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


当前回答

您可以隐藏下载链接,并使按钮单击它。

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

其他回答

引导程序版本

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

在Bootstrap 4文档中有记录,并且在Bootstrap 3中也有工作。

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

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

我觉得这就是你想要的解决方案

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

我有一个案例,我的Javascript生成了一个CSV文件。由于没有远程URL来下载它,我使用以下实现。

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

这是最终为我工作,因为要下载的文件是在页面加载时确定的。

JS来更新表单的action属性:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

调用JS来更新表单的action属性:

<body onLoad="setFormAction();">

表单标签与提交按钮:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

以下是没有工作:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

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