Question

我正在制作一个音频播放器，我想要包含一个下载当前曲目的按钮。我尝试了人们建议的常用解决方案，但这些只在新标签中打开.mp3并播放。这就是我正在使用的：

document.getElementById("dlButton").addEventListener("click", function(){
window.location = "tracks/CFKZ.mp3";});

我在堆栈溢出时看到了另一个解决方案here：

<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>

我不明白这一点。对我来说，为什么下载按钮需要将信息发送到要下载的文件是没有意义的。

Answer 1

下载链接的最佳做法如下：

<a href="path/to/file" class="button" download>Some text</a>

跨浏览器支持得相当好。您可以使用类设置链接样式，使其看起来像一个按钮，可能具有以下内容：

.button {
  text-decoration: none !important;
  border: 1px solid black;
}

编辑：如果你想使用它并让它在Safari或IE中运行，请使用类似Modernizr的东西。

Answer 2

如何使用锚标记，只需使用bootstrap使其看起来像一个按钮。

 <a href="tracks/CFKZ.mp3" download="tracks/CFKZ.mp3">Download!</a>

Answer 3

带有简单锚标记的HTML5解决方案，使用＆＃39;下载＆＃39;属性（不需要任何javascript）：

<a href="/music/somefile.mp3" download="somefile.mp3">Download mp3</a>

download属性也可用于重命名文件：

<a href ="/music/3ri3nlfkndfoiweuio.mp3" download="TheManWhoSoldTheWorld.mp3" >Download a Bowie Hit</a>

将下载为TheManWhoSoldTheWorld.mp3＆＃39;

编辑跨浏览器支持（依赖于Modernizr - 如果担心跨浏览器支持https://modernizr.com/，您应该使用它）：

也许这个小提琴会有所帮助：https://jsfiddle.net/abigwonderful/3jfqz5j0/2/ 或者只需在多个浏览器中打开此窗口，然后点击“运行代码段”＆＃39;下面：

＆＃13;

var a = document.createElement('a');
if (typeof a.download == "undefined") {
    //append some text to inform the user 
    //they should right-click the link to download
    //example:
    var downloadDiv = document.getElementById('download');
    downloadDiv.innerHTML = "Right-click the link and select 'Save as...' to download the mp3";

}

＆＃13;

<a href="/music/somefile.mp3" download="somefile.mp3">Download mp3</a>
<div id="download"></div>

＆＃13;

Answer 4

尝试以下代码，看看它是否是你想要的

<a href="test.zip" download='test'><input type="button" value="Download Now"></a>

下载按钮

4 个答案: