下载按钮答案

【问题标题】：Download button下载按钮
【发布时间】：2016-07-22 02:18:36
【问题描述】：

我正在制作一个音频播放器，我想包含一个下载当前曲目的按钮。我已经尝试过人们建议的常见解决方案，但这些只能在新选项卡中打开 .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>

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

【问题讨论】：

Clyde，你帖子上的 dlButton 是什么？
你为什么不做一个链接？
试试这个FileSaver库
@JaromandaX：那不是他想要的。
@SLaks 所以，他不想要一个按钮来下载文件而不是播放它吗？我一定是误读了这个问题，那么我会把它交给你有罪的，冠军

标签： javascript download

【解决方案1】：

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

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

这是相当不错的跨浏览器支持。您可以使用类设置链接的样式，使其看起来像一个按钮，可能类似于以下内容：

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

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

【讨论】：

【解决方案2】：

试试下面的代码，看看是不是你想要的

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

【讨论】：

【解决方案3】：

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

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

下载属性也可以用来重命名文件：

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

将下载为“TheManWhoSoldTheWorld.mp3”

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

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

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";

}

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

【讨论】：

可以，但不支持跨浏览器
@Clyde 你在使用 Modernizer 吗？
@Clyde Midernizr 将允许您查看用户的浏览器是否支持下载属性。见这里：stackoverflow.com/questions/12112844/…
@LucasWatson 但是对于不支持它的浏览器怎么办？
@Clyde 如果您查看上面的代码示例，如果浏览器不支持它，则会运行一个条件。此条件添加了一些文本，指示用户如何单击/保存链接文件。

【解决方案4】：

如何使用锚标签，只需使用引导程序使其看起来像一个按钮。

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

【讨论】：

这会在新标签页中打开 CFKZ.mp3 并使用浏览器的默认音频播放器播放，但不会下载。
试试下载属性。请参阅上面的代码编辑。