html5+js前端文件下载附源码

最近在开发程序，遇到了一些问题，在做文件下载时比如下载txt文件和图片a标签链接肯定是不行的，因为会在浏览器上面直接打开，正常情况应该是后台给接口前端来调用就ok了，但是现在后端比较懒不做下载功能让前端来做下载，那么前端如何做下载呢？今天给大家分享一下：


方法一：

<a href="web.txt" download="web前端发展前景.txt">普通下载</a>
href：后台的下载地址
download：下载后的文件名

利用a标签的download属性做下载，简单易用，但是不兼容IE。

方法二：

<a onclick="binaryFile('text','web前端发展前景.txt')">二进制下载</a>
<script>
    //content是后台传过来的二进制内容
    function binaryFile(content,fileName){

        var blob = new Blob([content]);
        //如果是IE10+用msSaveBlob方法
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
        } else {//其他浏览器
        // 创建隐藏的可下载链接
            var eleLink = document.createElement('a');
            eleLink.download = fileName;
            // 字符内容转变成blob地址
            var blob = new Blob([content]);
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
        }
    }
</script>

这个方法可以兼容IE，但是需要后台给的文件是二进制格式，并不是文件路径，这个方法是我在实际开发中使用的，当时后台给我返回的数据就是二进制。

好了就说到这里，对了如果是低版本浏览器做下载最好还是后台来解决吧。

代码下载