今天有个使用a标签下载一个 .txt 文件,但是使用了不少方法,在点击下载的时候总是会直接打开被下载的文件,但是下载其他格式的文件就不会;也在网上找了不少资料
有得说
测试是页面是这样
也有人说
要不就是这样
也使用过这种
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 method="post" target="_blank" role="form" action="'+data.urlPath+data.fileName+'" hidden="hidden"></form>') .appendTo('body').submit().remove();
这个一用页面这样了
晕!
还用过这种
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
请来感觉有些大材小用了(并且这里没有使用到 后端接口,没有设置允许跨域可想而知请求是不可能成功的),还是重新再找
最后仔细一想,等等,好像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>
哎,这么简单纠结半天,再次留下了没有技术的眼泪
手机扫一扫
移动阅读更方便
你可能感兴趣的文章