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

客官°小女子只卖身不卖艺 2023-07-15 02:55 1阅读 0赞

### 一、href + download方法 ###

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

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

这里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方法 ###

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