javascript - 在 html anchor 链接上下载音频文件，单击独立于浏览器操作

Question

我在页面上有一个指向 MP3 文件的 anchor 链接。我希望能够使用 Right-click + Save Target As.. 下载此文件并且也可以通过单击链接。

目前，我面临一个问题，即不同的浏览器有不同的行为。 IE 播放 WMP 格式的文件，Firefox 提示下载框，Chrome 开始播放内联文件。单击时的预期行为是浏览器应该下载文件或给我一个下载对话框。

我试过以下方法:

• 创建隐藏 iframe在页面上并将其作为我的 anchor 链接的目标，还尝试使用我想要的 MP3 文件位置创建一个表单作为其在此 iframe 中的操作并在 anchor 链接点击事件中提交表单
• 设置window.location = MP3 URL点击链接
• 尝试了 window.open 的多种组合

这些都无法帮助我。我只是无法在单击链接时获得下载对话框。

无辜的​​ anchor 链接看起来像:

<a id="someID" href="myMP3file" target="whatever" title="Download" class="someClass">Download Me!</a>

Answer 1

只是为了发布正确答案的开头。我想我会使用 http 处理程序 (.ashx) 文件来为这些文件编写一些自定义处理程序 - 这个 tutorial显示了一个例子。

你的链接应该是这样的

<a href="MyMp3Handler.ashx?fileName=MyFile">Click here to download</a>

处理程序将执行流式传输工作。

处理程序的示例(基于此 SO question )

public void ProcessRequest (HttpContext context) {

    var filePath = Server.MapPath(context.Request.QueryString["fileName"].ToString()) + ".mp3";          
    if (!File.Exists(filePath))             
        return;          

    var fileInfo = new System.IO.FileInfo(filePath);         
    Response.ContentType = "application/octet-stream";         
    Response.AddHeader("Content-Disposition", String.Format("attachment;filename=\"{0}\"", filePath));         
    Response.AddHeader("Content-Length", fileInfo.Length.ToString());         
    Response.WriteFile(filePath);         
    Response.End();
}

处理程序也需要在 web.config 中注册。

但请注意 - 这超出了我的考虑范围，因此需要调整代码才能正常工作。只是想我会弹出我将如何开始

附加说明

一位同事刚刚指出，即使将内容类型设置为 application/octet-stream，它仍然取决于浏览器实现如何呈现它，因此它仍然可能无法流式传输。也就是说，我做了类似的事情，但在 PHP 中，我在 Firefox、IE 和 Chrome 中得到了 mp3 文件流，所以原理确实有效。我在 asp.net 中提供了示例，因为这就是您的问题被标记为的内容。