在 html 錨鏈接上下載音頻文件，單擊獨立於瀏覽器操作

Question

我在頁面上有一個指向 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>

Answer 1

只是為了發布正確答案的開頭。 我想我會使用一個 http 處理程序 (.ashx) 文件來為這些文件編寫一些自定義處理 - 本教程展示了一個示例。

您的鏈接將類似於

<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 中提供了示例，因為這就是您的問題被標記為的內容。

Answer 2

@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 問題，有一個非常有幫助的答案！）沒有說！

---

抱歉多次修改！ 我的代碼失敗了一會兒。 我想，循環總是要走的路！！！

Answer 3

您可以簡單地使用錨標記的“下載”屬性。

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

這對我和我個人都有效，我更喜歡堅持使用提供的任何默認自定義設置。