a标签实现文件下载

时间 2019-11-15

标签标签实现文件下载繁體版

原文原文链接

若是想经过纯前端技术实现文件下载，直接把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属性不止能够实现下载，其属性值还能够规定下载时的文件名，若是不填写，会自动使用默认文件名。post

很遗憾，兼容性不佳，本人实际测试结果也同上图一致。可是，虽然不兼容，但不表明彻底不支持，IE 和 Safari 不会直接下载，可是会有下载提示框弹出，只是多绕了一步而已。若是不想借助后台而要实现文件下载，给a标签加download绝对是首选之策。测试

另外，咱们还能够经过js判断浏览器的兼容性去选择性给用户一些提示信息。spa

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