使用a标签下载**.txt文件, 而不是直接打开
今天有个使用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文件, 而不是直接打开相关推荐
- 【Springboot】解决下载TXT文件,浏览器直接打开问题
背景(需求) 在浏览器上点击按钮下载txt文件时,会直接在浏览器打开文件的.那如何使用弹窗下载呢? 前提 需要下载的文件,已经在服务器上面,文件结构为 **/download/report/**.tx ...
- 直接下载txt文件而不是打开它
js下载txt文件,而不是在浏览器中打开它 使用axios方法下载(关键点在于指定使用blob) downloadTxt(url) {axios.get(url, {responseType: 'bl ...
- 前端把其他格式图片转成png,jpg格式后下载,下载txt文件
文章目录 一.其他格式图片(如svg格式)转成png,jpg格式后再下载 二.下载txt文件 三.直接下载图片 一.其他格式图片(如svg格式)转成png,jpg格式后再下载 借助canvas(原图可 ...
- apache php提示下载,apache正在下载php文件而不是显示它们。
apache正在下载php文件而不是显示它们. 操作系统和服务器信息:CentOS 6.4(最终) Apache 2.2.15 PHP 5.5.1 我以前安装了php 5.3.x,但决定升级.我首先卸 ...
- python图片保存为txt文件_python实现对文件中图片生成带标签的txt文件方法
在深度学习中经常需要生成带标签的图片名称列表,xxxlist.txt文件,下面写一个简单的python脚本生成该文件列表. import os def generate(dir,label): fil ...
- vue项目中使用a标签下载视频文件
vue项目中使用a标签下载视频文件 前提条件: 1.地址为http 2.文件格式为MP4(仅代表这次项目中使用的情况) 示例代码: <el-button size="mini" ...
- js之生成并下载txt文件
转载自:博客园-莫小龙 的 js之生成并下载txt文件 function downloadTxt(text, fileName){let element = document.createElemen ...
- 使用Unicode字符集时用CFile把中文写入txt文件再用记事本打开出现乱码的问题
使用Unicode字符集时用CFile把中文写入txt文件再用记事本打开出现乱码的问题 新建一个记事本,写入"中",另存为ANSI.txt,编码选ANSI:再次另存为Unicode ...
- 使用a标签下载文件而不是直接打开
href + download方法 当我们使用a标签链接要下载的.txt或者.log等文件时,总是浏览器直接打开了文件而不是下载解决方式如下:给a标签添加一个download属性 <a href ...
最新文章
- C语言试卷终稿,C语言试卷终稿B1.doc
- php pdo获取查询数据_php使用PDO获取结果集的方法
- 刷算法题总结的一些结论公式
- BZOJ 4814 Luogu P3699 [CQOI2017]小Q的草稿 (计算几何、扫描线、set)
- r语言ggplot2 多线图绘制图例_plotnine: Python版的ggplot2作图库
- 7. Reverse Integer(反转整数)
- Java基础学习总结(116)——Map使用相关问题总结
- iirf有时有效,有时返回404错误的解决方法
- 利用fidder发送request
- 关于Android 11(R)适配指南
- adblock android插件,adblock plus
- 图片查看器-Python-tkinter
- P58-前端基础HTML-表格入门介绍
- 我心中有猛虎在细嗅蔷薇
- 心田花开:解锁各类语文阅读理解答题技巧
- 软件工程---个人总结
- Apple DNS加速
- 基于ROCKCHIP的ubuntu-base根文件系统构建
- 1.2:文本文件的加密
- 青云志 java_青云志手游纯手工架设含本地注册教程