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

2024年5月11日 339次阅读 来源: Tom不秃

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

    原文作者：Tom不秃
    原文地址: https://blog.csdn.net/da13122318861/article/details/104875284
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞