内容简介：分享最近踩到的小雷一枚。展示程式(DownloadTest.aspx)如下：一開始的版本，網頁上有個下載連結導向 ASPX 自己，以 Response.Write() 方式傳回內容。如此點選後瀏覽器被導向 DownloadTest.aspx?m=d，畫面顯示 Hello, World!
分享最近踩到的小雷一枚。
展示程式(DownloadTest.aspx)如下：
<%@Page Language="C#"%>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
if (Request["m"] == "d") {
Response.Write("Hello, World!");
Response.End();
}
}
</script>
<html>
<body>
<a href="DownloadTest.aspx?m=d">
Download TXT
</a>
</body>
</html>
一開始的版本，網頁上有個下載連結導向 ASPX 自己，以 Response.Write() 方式傳回內容。如此點選後瀏覽器被導向 DownloadTest.aspx?m=d，畫面顯示 Hello, World!
接著略作修改，在 <a> 加上 download Attribute，看看有什麼變化：
<a href="DownloadTest.aspx?m=d" download> Download TXT </a>
點連結變成下載檔案，由於非 js、css、png 等靜態內容，瀏覽器無法決定檔名，彈出另存新檔對話框詢問命名：
接著修改為 <a download="filename in attr.txt"> 指定下載檔名。
<%@Page Language="C#"%>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
if (Request["m"] == "d") {
Response.Write("Hello, World!");
Response.End();
}
}
</script>
<html>
<body>
<a href="DownloadTest.aspx?m=d" download="file name in attr.txt">
Download TXT
</a>
</body>
</html>
這一次點選連結時直接下載檔案，檔名為 download Attribute 所指定的 filename in attr.txt：
再來我們在 ASPX Server 端加上 Content-Type = application/octet-stream、Content-Disposition 指定檔名為 hello world.txt (刻意與 download="file name in attr.txt" 有所區別)， 為防止中文字元或特殊符號作怪，用老方法 HttpUtility.UrlEncode() 對檔名編碼：參考
void Page_Load(object sender, EventArgs e)
{
if (Request["m"] == "d") {
Response.ContentType = "application/octet-stream";
var fileName = "hello world.txt";
Response.Headers.Add("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(fileName));
Response.Write("Hello, World!");
Response.End();
}
}
回傳 Content-Disposition 後，下載檔名改由 Content-Disposition 決定。但發現一問題，存檔時空白字元被 UrlEncode 改成加號，瀏覽器未將其還原回空白，檔名變成 hello+world.txt：
空白被轉成 + 屬於 UrlEncode() 的已知行為，改用 Uri.EscapeDataString()：參考
void Page_Load(object sender, EventArgs e)
{
if (Request["m"] == "d") {
Response.ContentType = "application/octet-stream";
var fileName = "hello world.txt";
Response.Headers.Add("Content-Disposition", "attachment; filename=" + Uri.EscapeDataString(fileName));
Response.Write("Hello, World!");
Response.End();
}
}
EscapeDataString() 將空白轉為 %20，瀏覽器端解析檔名正確：
整理重點：
- <a> 導向 html、jpg、png 等瀏覽器已知可檢視型別時，預設會直接顯示在瀏覽器視窗。
- <a> 加上 download Attribute 後，瀏覽器點選行為會改成下載。(註：非所有瀏覽器適用，例如 IE 就不支援 )
- 如伺服器端回傳 Content-Disposition 並指定檔名，瀏覽器將忽略 download="filename" 以 Content-Disposition 指定者為準。
補上 MDN 文件 download Attribute 的更完整說明：
- download Attribute 只適用於同源 URL。(Cross-Site 時無效)
- 透過 JavaScript 產生的 blob: 及 data: URL 也適用。例如用 Canvas 畫圖產生圖檔，轉成連結讓使用者下載。
- 若伺服器回傳 Content-Disposition: attachment; filename=xxx 指定不同檔名，以其為準。
- 若伺服器回傳 Content-Disposition: inline ; finename=xxx 指定不同檔名，Firefox 以 Content-Disposition 優先；Chrome 以 download Attribute 為準。
Use example to demostrate how to use HTML down attribute and the behavior of browser.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Practical Django Projects, Second Edition
James Bennett / Apress / 2009 / 44.99
Build a django content management system, blog, and social networking site with James Bennett as he introduces version 1.1 of the popular Django framework. You’ll work through the development of ea......一起来看看 《Practical Django Projects, Second Edition》 这本书的介绍吧!
