iT邦幫忙

3

[C#] ASP.NET 檔案下載(1) - POST 和 GET 觸發檔案下載

[C#] ASP.NET 檔案下載(1) - POST 和 GET 觸發檔案下載
[C#] ASP.NET 檔案下載(2) - 大型檔案下載
[C#] ASP.NET 檔案下載(3) - 檔案續傳

本篇主要介紹 POST 和 GET 觸發檔案下載的使用方式。

1. POST使用表單送出的方式呼叫檔案下載

<form id="form1" runat="server">
    <div>
        <button type="button" id="download_btn">下載檔案 (POST)</button>
    </div>
</form>
<script>
    document.getElementById("download_btn").onclick = function () {

        //檔案下載網址
        var url = "/Download.ashx";
        
        var form = document.createElement("form");

        form.method = "POST";
        form.action = url;

        //如果想要另開視窗可加上target
        //form.target = "_blank";

        //index為要下載的檔案編號,存入hidden跟表單一起送出
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = "index";
        input.value = "1";
        form.appendChild(input);

        //送出表單並移除
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(form);
        form.submit();
        form.remove();
    };
</script>

2. GET使用超連結的方式呼叫檔案下載

<form id="form1" runat="server">
    <div>
        <a id="download_btn">下載檔案 (GET)</a>
    </div>
</form>
<script>
    //檔案下載網址
    var url = "/Download.ashx";

    var a = document.getElementById("download_btn");

    //index為要下載的檔案編號,使用QueryString方式加入網址後方
    a.href = url + "?index=2";

    //如果想要另開視窗可加上target
    //a.target = "_blank";
</script>

3. 後端程式使用泛型處理常式

public class Download : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var index = context.Request.Params["index"];

        var fileName = "測試檔案" + index + ".xlsx";
        
        //取得檔案在Server上的實體路徑
        var filePath = context.Server.MapPath("~/File/" + fileName);

        //讀取檔案並將檔案轉成二進制內容
        var output = new byte[0];
        using (var fs = new FileStream(filePath, 
            FileMode.Open, FileAccess.Read))
        {
            output = new byte[(int)fs.Length];
            fs.Read(output, 0, output.Length);
        }

        //將檔案輸出到瀏覽器
        context.Response.Clear();
        context.Response.AddHeader(
            "Content-Length", output.Length.ToString());
        context.Response.ContentType = "application/octet-stream";
        context.Response.AddHeader(
            "content-disposition", 
            "attachment; filename=" + fileName);
        context.Response.OutputStream.Write(output, 0, output.Length);
        context.Response.Flush();
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

結果:
https://ithelp.ithome.com.tw/upload/images/20171013/20106865aWMwfSogZ3.jpg
檔案下載成功。

結語:
目前後端的寫法只適合小檔案下載,大型檔案下載下一篇繼續介紹。


1 則留言

0
神Q超人
iT邦新手 5 級 ‧ 2017-10-13 16:50:11

你也是用Webform配JS和AJAX的方式POST到ashx處理資料哦/images/emoticon/emoticon32.gif

對阿,公司習慣這種作法,所以很少用控制項,都是用 ashx 處理完後回傳 JSON,前端再用 JS 處理 XD

我們公司也是耶!!!!看來以後有人可以交流了XD

哈哈,歡迎喔~

我要留言

立即登入留言