HTML5 A連結
1.基本使用
href：規定連結的目標 URL。
target屬性有以下幾個值：
_self：預設，當前頁面跳轉。
_blank：新視窗開啟。
_parent：在父視窗中開啟連結。
_top：在當前窗體開啟連結，並替換當前的整個窗體(框架頁)。
framename:在指定的框架中開啟被連結文件。通俗的說在特定新視窗開啟
<a href="http://www.baidu.com">百度一下 (預設，當前頁面跳轉。)</a> <br /> <a href="http://www.baidu.com" target="_blank">百度一下 新視窗開啟</a> <br /> <a href="http://www.baidu.com" target="_1">百度一下 特定視窗開啟</a> <br /> <a href="http://www.taobao.com" target="_1">淘寶 特定視窗開啟</a>
這裡解釋一下：target="_blank"和target="_1"都會使用新視窗開啟目標連結，但是target="_blank"每次點選都會建立新的視窗，而target="_1"只會初次點選時開啟新視窗，以後所有使用target="_1"的視窗都會覆蓋剛剛開啟的視窗，相當於是一個被命名的新視窗開啟。所以後面2個連結重複點選會在一個視窗中相互覆蓋
2.下載檔案
(1)當目標 URL返回的文件型別是html，img之類能被瀏覽器直接開啟的檔案時，瀏覽器會直接預覽這個檔案。
(2)如果返回的文件型別瀏覽器無法直接開啟，例如表格，pdf，壓縮包，會彈窗提示使用者是否儲存。
(3)如果想下載img之類的文件，則需要新增download屬性。他的值可以不設定，預設是連結的檔名，如果設定了值，則這個值就是檔案下載時的檔名
(4)跨域時 download 屬性無效,即：無法下載跨域伺服器的圖片資源，點選後只能預覽。對於pdf文件這類瀏覽器無法識別的文件，跨域仍能下載，但是download屬性設定的檔名無效。
注意:請在伺服器環境測試，本地環境開啟是無效的。
注意：無法下載跨域的圖片資原始檔，只能預覽
<body> <a href="./resource/kof.jpg">預覽圖片</a> <br /> <!-- 檔名預設為 熱血足球.jpg--> <a href="./resource/熱血足球.xlsx">下載文件</a> <br /> <!-- 檔名預設為 kof.jpg--> <a href="./resource/kof.jpg" download>下載圖片</a> <br /> <!-- 檔名預設為 xxx.jpg--> <a href="./resource/kof.jpg" download="xxx">下載圖片 (改名)</a> <br /> <!-- 檔名預設為 a.jpg--> <a href="./resource/熱血足球.xlsx" download="a">下載文件(改名)</a> </body>
跨域時：
<body>
<!-- 跨域時 download 屬性無效-->
<!-- 下載檔名 熱血足球.xlsx-->
<a href="http://127.0.0.1:8090/熱血足球.xlsx" download="xxx">跨域下載文件</a>
<br />
<!-- 下載檔名 熱血足球.xlsx 改名無效-->
<a href="http://127.0.0.1:8090/熱血足球.xlsx" download="xxx">跨域下載文件 (改名)</a>
<br />
<!-- 無法下載 直接預覽開啟-->
<a href="http://127.0.0.1:8090/kof.jpg" download="xxx">跨域下載圖片 (改名)</a>
</body>
3.使用js下載資源
如果是資源是瀏覽器無法直接開啟的型別，那麼直接跳轉到指定url即可，程式碼如下
<script>
var btn = document.querySelector('#btn')
btn.onclick = function(){
window.location = 'http://127.0.0.1:8090/熱血足球.xlsx'
}
</script>
如果資源是圖片型別，這種方法就會直接預覽圖片，需要建立一個a連結，設定download屬性來下載
注意：無法下載跨域的圖片資原始檔，只能預覽
<script>
var btn = document.querySelector('#btn')
btn.onclick = function(){
//window.location = 'http://127.0.0.1:8090/kof.jpg'
downloadImg('./resource/kof.jpg','filename')
}
function downloadImg(url,name){
//建立a標籤
var node_a = document.createElement('a')
//新增屬性
node_a.innerHTML = '下載圖片'
node_a.href = url
node_a.download = name || ''
//觸發點選事件
console.log('觸發點選事件')
node_a.click()
}
</script>