使用a标签下载**.txt文件， 而不是直接打开

今天有个使用a标签下载一个 .txt 文件，但是使用了不少方法，在点击下载的时候总是会直接打开被下载的文件，但是下载其他格式的文件就不会；也在网上找了不少资料

一、尝试href + download方法

有得说
在这里插入图片描述
测试是页面是这样
在这里插入图片描述

二、尝试另一种href + download方法

也有人说
在这里插入图片描述

要不就是这样
在这里插入图片描述

三、尝试createElement方法

也使用过这种


function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
 
  element.style.display = 'none';
  document.body.appendChild(element);
 
  element.click();
 
  document.body.removeChild(element);
}
 
 
download("hello.txt","This is the content of my file :)")

这个直接创建的文件可以下载，但是
将element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
改为服务端地址如element.setAttribute('href', 'fileurl');就不行了

四、尝试form 方法

也使用过这种


$('<form method="post" target="_blank" role="form" action="'+data.urlPath+data.fileName+'" hidden="hidden"></form>') .appendTo('body').submit().remove();

在这里插入图片描述
这个一用页面这样了
在这里插入图片描述

晕！

五、尝试XMLHttpRequest方法

还用过这种

function downloadIamge() {  
 var url = "";
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);//get请求，请求地址，是否异步
xhr.responseType = "blob";    // 返回类型blob
xhr.onload = function () {// 请求完成处理函数
	if (this.status === 200) {
		var blob = this.response;// 获取返回值
		var a = document.createElement('a');
		a.download = 'data.doc';
		a.href=window.URL.createObjectURL(blob);
		a.click();
    }
};
// 发送ajax请求
xhr.send();

}

但是这个好像把事情搞大了，下个文件而已嘛，还得把XMLHttpRequest请来感觉有些大材小用了（并且这里没有使用到 后端接口，没有设置允许跨域可想而知请求是不可能成功的），还是重新再找

六、最终还是使用href + download方法解决问题

最后仔细一想，等等，好像get到了，其实就是这个a他在认识的文件的情况下出现了跳转吗！所以有时候下载其他什么压缩包之类的其他类型文件都能顺利搞定

那问题就简单了

看


<!--标签属性href，使其指向空或不返回任何内容。如：-->
<a href="javascript:void(0);" >点此无反应javascript:void(0)</a>

<a href="javascript:;" >点此无反应javascript:</a>

<!--标签事件onclick，阻止其默认行为。如：-->
<a href="" onclick="return false;">return false;</a>

<a href="#" onclick="return false;">return false;</a>

最后将页面修改为


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test file download by tag of a</title>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>

	<body>
		<a href="#" download="fileurl">download8888</a>
	</body>

</html>

哎，这么简单纠结半天，再次留下了没有技术的眼泪

posted @ 2019-11-11 21:43  奔跑的痕迹  阅读(7234)  评论(0)    收藏  举报