a標簽實現文件下載


如果想通過純前端技術實現文件下載,直接把a標簽的href屬性設置為文件路徑即可,如下:

<a href="https://cdn.shopify.com/s/files/1/1545/3617/files/SH01_User_Manaul.pdf">download</a>

但是,對於 txt , jpg , pdf 等瀏覽器支持直接打開的文件不會被執行下載,而是會直接打開,這時候一個新屬性就要上場了--【download】

<a href="https://cdn.shopify.com/s/files/1/1545/3617/files/SH01_User_Manaul.pdf" download="test.pdf">download</a>

download屬性不止可以實現下載,其屬性值還可以規定下載時的文件名,如果不填寫,會自動使用默認文件名。

很遺憾,兼容性不佳,本人實際測試結果也同上圖一致。但是,雖然不兼容,但不代表完全不支持,IE 和 Safari 不會直接下載,但是會有下載提示框彈出,只是多繞了一步而已。如果不想借助后台而要實現文件下載,給a標簽加download絕對是首選之策。

另外,我們還可以通過js判斷瀏覽器的兼容性去選擇性給用戶一些提示信息。

<script>
    var supportDownload = "download" in document.createElement("a");
    if(!supportDownload){
//        code...
    }
</script>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM