Html Download Attribute 行為實驗

栏目: Html · 发布时间: 6年前

内容简介:分享最近踩到的小雷一枚。展示程式(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!

Html Download Attribute 行為實驗

接著略作修改,在 <a> 加上 download Attribute,看看有什麼變化:

<a href="DownloadTest.aspx?m=d" download>
	Download TXT
</a>

點連結變成下載檔案,由於非 js、css、png 等靜態內容,瀏覽器無法決定檔名,彈出另存新檔對話框詢問命名:

Html Download Attribute 行為實驗

接著修改為 <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:

Html Download Attribute 行為實驗

再來我們在 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:

Html Download Attribute 行為實驗

空白被轉成 + 屬於 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,瀏覽器端解析檔名正確:

Html Download Attribute 行為實驗

整理重點:

  1. <a> 導向 html、jpg、png 等瀏覽器已知可檢視型別時,預設會直接顯示在瀏覽器視窗。
  2. <a> 加上 download Attribute 後,瀏覽器點選行為會改成下載。(註:非所有瀏覽器適用,例如 IE 就不支援 )
  3. 如伺服器端回傳 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.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

《Unity3D网络游戏实战(第2版)》

《Unity3D网络游戏实战(第2版)》

罗培羽 / 机械工业出版社 / 2019-1-1 / 89.00元

详解Socket编程,搭建稳健的网络框架;解决网游中常见的卡顿、频繁掉线等问题;探求适宜的实时同步算法。完整的多人对战游戏案例,揭秘登录注册、游戏大厅、战斗系统等模块的实现细节。 想要制作当今热门的网络游戏,特别是开发手机网络游戏,或者想要到游戏公司求职,都需要深入了解网络游戏的开发技术。本书分为三大部分,揭示网络游戏开发的细节。 第一部分“扎基础”(1-5章) 介绍TCP网络游......一起来看看 《《Unity3D网络游戏实战(第2版)》》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具