常見的一些檔案上傳元件都會在上傳後附加一個可點選的檔名，如圖中的xxx.png，這個檔名由<a>標籤包裹，業務需求要求點選xxx.png下載對應的檔案，而常見檔案上傳元件的效果都是跳轉到連結頁面。

 解決方法是利用preventDefault()方法清除元件中<a>標籤的跳轉效果，然後獲取href並自行建立新的帶有download屬性的<a>標籤進行下載操作。

<div onclick="interceptor()">
	<!-- 之所以不把攔截方法直接放在 <a> 標籤上是因為很多元件庫都把 <a> 標籤封裝起來了 -->
 

	<a href="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1540885002&di=afbac9061dd1e9401b6b2fe448f05bd5&src=http://i1.hdslb.com/bfs/archive/21464a12b2a5f400e2e6dc554b8665664c18c141.jpg">這是一個被封裝起來可點選到的a標籤</a>
	<!-- 這是一個被封裝起來且可點選到的 <a> 標籤，路徑是一張準備要下載的 jpg 圖片 -->
 

</div>
<script>
function interceptor() {
	const element = this.event.target; // 獲取到 <div> 內被點選的節點
	if (element.tagName !== 'A') {
		return; // 判斷被點選的節點是不是 <a> 標籤
	}
	this.event.preventDefault(); // 如果是 <a> 標籤則清除預設行為，即清除跳轉到 href 的行為
	const href = element.getAttribute('href'); // 獲取 <a> 標籤內的 href
 


	const a = document.createElement('a'); // 創造新的 <a> 標籤用於下載
	a.setAttribute('download', ''); // 新增 download 屬性
	// 僅 chrome、firefox 支援 download 屬性，其他瀏覽器應使用 <iframe>
	a.setAttribute('href', href); // 新增 href
	a.click(); // 自行點選 但是下載無效 仍然是跳轉連結的效果 GG
}
</script>

 百度後發現無法下載的原因是<a>標籤中的圖片連結由於瀏覽器禁止跨域而導致download屬性無效，如果不跨域的話這個方法其實是好用的，那如果我就想下載必須要跨域的防火女小姐姐高清無碼大圖又該怎麼辦？

於是針對跨域問題又查閱了其他方案，比如這篇毒瘤文章提到的可以利用canvas取得base64編碼資料：
a標籤download屬性下載還是打開了檔案~（下載地址跨域了）

 測試過程中發現canvas能夠顯示跨域圖片，但是無法執行toDataURL轉碼的操作。按照上面文章提到的方法需要讓canvas中載入的image加上下面這句允許跨域的語句。

image.setAttribute('crossOrigin', 'anonymous'); // 這句需要在 image.src = href; 之後新增，否則無效

加上後的效果是canvas連圖片都顯示不出來了，繼續百度發現瞭如下回答：
img加上crossOrigin="anonymous"之後導致圖片無法顯示

 我現在的內心是這樣的：