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

一、尝试href + download方法

有得说



测试是页面是这样

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

也有人说

要不就是这样

三、尝试createElement方法

也使用过这种


  2. function download(filename, text) {
  3.   var element = document.createElement('a');
  4.   element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  5.   element.setAttribute('download', filename);
  7.   element.style.display = 'none';
  8.   document.body.appendChild(element);
  10.   element.click();
  12.   document.body.removeChild(element);
  13. }
  15. 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 方法

也使用过这种


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



这个一用页面这样了

晕！

五、尝试XMLHttpRequest方法

还用过这种

  1. function downloadIamge() {
  2.  var url = "";
  3. var xhr = new XMLHttpRequest();
  4. xhr.open('GET', url, true);//get请求，请求地址，是否异步
  5. xhr.responseType = "blob";    // 返回类型blob
  6. xhr.onload = function () {// 请求完成处理函数
  7. 	if (this.status === 200) {
  8. 		var blob = this.response;// 获取返回值
  9. 		var a = document.createElement('a');
  10. 		a.download = 'data.doc';
  11. 		a.href=window.URL.createObjectURL(blob);
  12. 		a.click();
  13.     }
  14. };
  15. // 发送ajax请求
  16. xhr.send();
  18. }

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

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

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

那问题就简单了

看


  2. <!--标签属性href，使其指向空或不返回任何内容。如：-->
  3. <a href="javascript:void(0);" >点此无反应javascript:void(0)</a>
  5. <a href="javascript:;" >点此无反应javascript:</a>
  7. <!--标签事件onclick，阻止其默认行为。如：-->
  8. <a href="" onclick="return false;">return false;</a>
  10. <a href="#" onclick="return false;">return false;</a>

最后将页面修改为


  2. <!DOCTYPE html>
  3. <html>
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title>test file download by tag of a</title>
  7. 		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  8. 	</head>
  10. 	<body>
  11. 		<a href="#" download="fileurl">download8888</a>
  12. 	</body>
  14. </html>

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

使用a标签下载**.txt文件， 而不是直接打开的更多相关文章

  1. 有关谷歌下载PDF文件而不是直接打开预览的问题

    找了很多帖子,都不行, 解决方法把链接处理成blob文件再调用下载. 但是仍然不行,最终原因找到: 缺少了这一部创建,需要把二进制数据重新用 Blob对象申明下 let data = new Blob ...

  2. IIS6.0禁止用户下载txt文件

    服务器win2003+IIS6.0,在IIS上限制下载.txt文件,方法比较简单,在IIS的应用程序扩展名映射中为资源扩展名指定一个错误的可执行文件即可. 打开记事本,直接将空内容保存为C:\WIND ...

  3. 下载apk文件浏览器会直接打开并显示乱码的问题

    今天同事反映他的apk文件在自己的老项目中下载有问题:下载apk文件浏览器会直接打开并显示乱码,在别的项目中就没有问题. 后分析response的content-type发现,老项目的类型是text/ ...

  4. .NET 在浏览器中下载TXT文件

    通常我们用浏览器打开Txt文件时候,浏览器会直接打开,我们想要txt下载到本地该怎么操作,用js也可以,单不能兼容所有的浏览器,所以我们可以在服务端做处理,代码如下: //TXT文件生成页面 publ ...

  5. HTML a 标签 下载 apk 文件

    代码:   <a href="http://www.abc2016.com/phone_Client/shouji.apk" class="download_inp ...

  6. txt文件怎么设置默认打开是用这个EditPlus软件打开

    1.如果是正常安装的Editplus,只需要右击“txt文件”,在“打开方式”中选择“打开程序”,再点击“浏览”,找到“Editplus”打开,再将“始终使用选择的程序打开这种文件”前面的“口”选中, ...

  7. HTML 单击a标签 实现下载文件而不是浏览器打开预览

    <a d ownload class="down" title="">

  8. ABAP下载txt文件

    IF NOT DOWN_F[] IS INITIAL.    CASE DOWN_MODE . "下载模式是放在所选路径下的.TXT文档中      WHEN 'X' .        CA ...

  9. 点击a标签实现txt文件另存的效果

    亲测成功,使用servlet实现的,核心代码: 前台代码: function downModel(filePath){ var formFile=$("<form>") ...

  10. JSP下载txt 和 Excel两种文件

    JSP下载txt 和 Excel两种文件 jsp 下载txt文件和excel文件   jsp 下载txt文件和excel文件 最近做了个用jsp下载的页面 将代码贴出来 权作记录吧 1 下载txt文件 ...

随机推荐

  1. Net DB Web多级缓存的实现

    1.客户端缓存(浏览器缓存) HTTP有一套控制缓存的协议-RFC7234,其中最重要的就是cache-control这个相应报文头,服务器返回时,如果Response带上 cache-control ...

  2. ZGC 最新一代垃圾回收器[NO]

    ​ZGC(The Z Garbage Collector)是JDK 11中推出的一款低延迟垃圾回收器,ZGC可以说源自于 Azul System 公司开发的C4收集器[基本不用调优]它的设计目标包括: ...

  3. mac tip---->开发的tip

    delete webstorm Besides we delete the Webstorm App, We also need to delete related config or log dir ...

  4. Hugging Face 社区中蓬勃发展的计算机视觉

    在 Hugging Face 上,我们为与社区一起推动人工智能领域的民主化而感到自豪.作为这个使命的一部分,我们从去年开始专注于计算机视觉.开始只是 Transformers 中 Vision Tra ...

  5. win10_Dock安装设置

    1.安装:(在win10上安装) 桌面版:https://www.docker.com/products/docker-desktop, 安装后重启电脑 2.配置 打开DockerDesktop,(可 ...

  6. 当后端人员未提供接口，前端人员该怎么测试 --mock

    1.回顾 2.线上的mock http://rap2.taobao.org/ https://www.easy-mock.com/ 3.线上接口文档 Swagger https://swagger.i ...

  7. react状态管理器（分模块）之redux和redux + react-redux + reducer和redux + react-redux + reducer分模块 + 异步操作redux-thunk

    1.回顾 cnpm i redux react-redux redux-thunk -S store/index.js src/index.js src/views/home/index.jsx + ...

  8. （原创）【B4A】一步一步入门10：TabHost，标签页、标题带图标（控件篇06）

    一.前言 本篇教程我们来讲一下TabHost(标签页)的基本使用方法. 相信看完的你,一定会有所收获! 本文地址:https://www.cnblogs.com/lesliexin/p/1728556 ...

  9. 如何申请 Azure OpenAI

    一.前言 众所周知 OpenAI ChatGPT 是不对中国开放的,包括香港.就最近一个月的情况来看,陆续有 API 调用被限制.大规模账号封禁.关闭注册.无法直接使用银联支付(国内信用卡)等等,使用 ...

  10. 二进制安装Kubernetes（k8s） v1.22.10 IPv4/IPv6双栈

    二进制安装Kubernetes(k8s) v1.22.10 IPv4/IPv6双栈 Kubernetes 开源不易,帮忙点个star,谢谢了 介绍 kubernetes二进制安装 后续尽可能第一时间更 ...