在html锚链接上单击下载音频文件,独立于浏览器操作

时间:2012-05-09 09:11:15

标签: javascript jquery asp.net html html5

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

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

我试过以下:

  • 在页面上创建一个隐藏的iframe并将其作为我的锚链接的目标,同时尝试使用我所需的MP3文件位置创建一个表单作为其iframe内的操作并提交表单在锚链接点击事件
  • 点击链接
  • 设置window.location = MP3 URL
  • 尝试了window.open
  • 的多种组合

这些都没有能够帮助我。我无法通过链接点击获得下载对话框。

无辜的​​锚链接如下:

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

3 个答案:

答案 0 :(得分: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中提供了示例,因为这是您的问题被标记为。

答案 1 :(得分:1)

@CrabBucket - 这就是我解决问题的方法!! 对我来说很棒:) 我正在使用控制器操作从此服务器端启动此下载(这就是我没有使用处理程序的原因)。从控制器返回一个http响应最初似乎很棘手,但后来我找到了欺骗这个东西的方法;) 我必须在控制器操作中编写以下代码 -

{
    HttpWebRequest myRequest = (HttpWebRequest)HttpWebRequest.Create(FileURL);
    HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();

    Stream myStream = myResponse.GetResponseStream();

    Response.ContentType = "application/octet-stream";
    Response.AddHeader("Content-Disposition", "attachment; filename=\"SaveMe.MP3\"");

    var readBytes = 10000000;
    var myAudResponse = new byte[readBytes];
    int fileLength;
    do {
        fileLength = myStream.Read(myAudResponse, 0, (int)readBytes);
        Response.OutputStream.Write(myAudResponse, 0, fileLength);
        Response.Flush();
    } while (fileLength > 0);
    myStream.Close();

    return new EmptyResult();
}

根据你的智慧使用基本的Try-Catch等:) 非常感谢各种网络论坛和CrabBucket(你发布代码的SO问题,答案非常有帮助!)不言而喻!


抱歉有多处修改!我的代码失败了一会儿。我想,循环总是要走的路!!!“

答案 2 :(得分:0)

您可以简单地使用锚标记的“下载”属性。

<a href='your_link' download='file_name'>Download_ME!</a>

这对我和个人都有效,我更喜欢坚持使用提供的默认自定义内容。