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

一、尝试href + download方法

有得说



测试是页面是这样

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

也有人说

要不就是这样

三、尝试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("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 方法

也使用过这种



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

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

最后仔细一想，等等，好像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>

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

使用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. jetbrains账户的注册

    注册步骤 1.进入官网界面 官网地址在这里啦:https://www.jetbrains.com/ 官网本来显示的是这个界面: 点击右上角的Learning Tools,然后选择该页面内的这里: 2. ...

  2. Jetson Xavier NX 试玩 (一)

    Jetson Xavier NX 试玩 (一) 环境搭建 0 前言 NVIDIA家的Jetson系列是业内嵌入式边缘计算机的代表作,体积小,功能强是其最主要的优点. 学院入手了一款Jeston Xav ...

  3. Unity绘制圆和缓动雷达图

    Unity绘制圆和缓动雷达图 之前在做UI模块的时候遇到过需要做雷达图的效果,所以简单复习了一下 关于网格绘制 我们都知道Unity绘制图形是通过Mesh网格添加顶点进行绘制,那么知道顶点信息后如何实 ...

  4. [C++STL教程]2.queue队列容器，小白都能看懂的讲解！

    在学习数据结构的时候我们会听到这样一个词:队列. 本文将介绍STL中的队列:queue 本文仅从入门和实用角度介绍queue的用法,主要针对初学者或竞赛向.如有不严谨的地方欢迎指正!本文长度约2000 ...

  5. es6数组相关操作

    1. 获取两个数组中某个属性值相等的项 let a=[{name:1},{name:4},{name:3}] let b=[{name:5},{name:4},{name:2}] let index ...

  6. 人工智能NVIDIA显卡计算（CUDA+CUDNN）平台搭建

    NVIDIA是GPU(图形处理器)的发明者,也是人工智能计算的引领者.我们创建了世界上最大的游戏平台和世界上最快的超级计算机. 第一步,首先安装N卡驱动. cby@cby-Inspiron-7577: ...

  7. elk7.15.1安装部署搭建

    ELK简介 ELK是Elasticsearch.Logstash.Kibana三大开源框架首字母大写简称(但是后期出现的Filebeat(beats中的一种)可以用来替代Logstash的数据收集功能 ...

  8. 8.redis存储token以及springboot整合Jwt

    1.总结: 昨天主要是下载安装和使用redis去存储token,但在创建redis的新建的时候出现了host异常,原因是没有将服务中的进程关掉,再重新打开redis的server,再打开cli: 回顾 ...

  9. 无法加载 DLL“xxxx.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。

    有一台服务器在执行接口的时候遇到了这样一个问题: 其他服务器上都没有这个问题,IIS部署好的项目目录的bin文件夹下是有这个dll的,但却提示无法加载,在网上找了好多帖子,终于发现了问题. 首先用De ...

  10. 用 hexo 结合 github 从0到1开始搭建属于你的blog

    前言 github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话根本 ...