js下载 txt 文本文件的兼容方法

出现的问题: txt文本文件在浏览器中用a标签下载,会直接打开,而不会下载。

解决思路:

1、先判断返回的地址中时候有 .txt 字符

2、判断是什么浏览器,判断使用哪种的 get 的请求

3、拿到地址后,创建 a 标签,设置 a 标签的下载地址

4、把请求的地址中获取的文本信息 responseText ,通过new Blob() 生成 blob 文件流

5、把 blob 文件流复制给 a 标签,触发 a 标签点击下载,然后移除 a 标签

注意:因为 a 标签下载的是 blob 文件流地址,所以浏览器不会直接打开文件进行浏览,而是触发下载

//txt等格式
if(url.indexOf('.txt') != -1){ //判断地址栏是否有.txt,有就是txt文件
    var xmlHttp = null;
    if (window.ActiveXObject) {
        // IE6, IE5 浏览器执行代码
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlHttp = new XMLHttpRequest();
    }
    //2.如果实例化成功,就调用open()方法:
    if (xmlHttp != null) {
        xmlHttp.open("get", url, true);
        xmlHttp.send();
        xmlHttp.onreadystatechange = doResult; //设置回调函数                 
    }
    function doResult() {
        if (xmlHttp.readyState == 4) { //4表示执行完成
            if (xmlHttp.status == 200) { //200表示执行成功
                // 创建隐藏的可下载链接
                var aLink = document.createElement('a');
                aLink.download = name; //设置a标签的下载名字
                aLink.style.display = 'none';
                // 字符内容转变成blob地址
                var blob = new Blob([xmlHttp.responseText]);
                aLink.href = URL.createObjectURL(blob);
                // 触发点击
                document.body.appendChild(aLink);
                aLink.click();
                // 然后移除
                document.body.removeChild(aLink);
            }
        }
    }
}

猜你喜欢

转载自blog.csdn.net/lgysjfs/article/details/88641892
今日推荐