a标签下载txt,会直接打开txt文件的处理方法

一、href + download方法

通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到数据库里以便下载,如果想不通过后台直接下载的话,可以把文件路径给a标签的属性href;

<a href="/attachment/xxxx.txt">下载</a>

这样当用户打开浏览器点击链接的时候就会直接下载文件。
但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“download”;

<a href="/attachment/xxxx.txt" download="filename.txt">下载</a>

这里download也可以不写任何信息,会自动使用默认文件名。
在这里说明一些IE好像不支持,只能通过后台代码搞。

二、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("filename.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请来感觉有些大材小用了(并且这里没有用到后端接口,没有设置允许跨域可想而知请求是不可能成功的)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章