在前端下载文本格式的文件时,可采用下面的方式:

(1)创建基于文件内容的Blob对象;

(2)通过URL上的createObjectURL方法,将blob对象转换成一个能被浏览器解析的文件地址。

(3)将上述的文件地址指向a标签的href,并设置a标签的download属性为要保存成的文件名。

(4)点击a标签,即可下载对应的文件。

//下载文件
_download:function (filename,content){
var blob = new Blob([content], {type: 'text'});
var a =document.getElementById('downloadFtsetBtn');
if(a==undefined){
a=document.createElement('a');
a.id='downloadFtsetBtn';
a.style.display='none';
a.target='_blank';
document.body.appendChild(a);
}
try{
var URL=window.URL || window.webkitURL;
a.href=URL.createObjectURL(blob);
a.download = filename;
if (typeof navigator.msSaveBlob == "function"){ //IE
navigator.msSaveBlob(blob,filename);
           }
a.click(); catch(e){ } }

js实现前端下载文件的更多相关文章

  1. 在浏览器端用JS创建和下载文件

    前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等). 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打 ...

  2. js从服务器下载文件

    通常,将文件绝对路径url作为超链接<a>的链接地址href的值,点击<a>后,浏览器将会尝试请求文件资源,如果浏览器能够辨认文件类型,则将会以预设的打开方式直接打开下载的文件 ...

  3. js之Ajax下载文件

    传统上,客户端将依靠浏览器来处理从服务器下载文件.然而,这种方法需要打开一个新的浏览器窗口,iframe或任何其他类型的不友好和黑客行为.为下载请求添加额外的头信息也很困难.更好的解决方案是使用HTM ...

  4. jquery.form.js ie 下下载文件已经ie8失效问题解决方案

    https://github.com/malsup/form/blob/master/jquery.form.js在使用这个插件时遇到的问题1.ie下会变成下载文件,解决方案是在后端返回时设置'Con ...

  5. js通过 URL下载文件

    页面上一个button,点击之后触发一个function去请求数据,返回 pdf/epub 的URL,然后下载这个文件. 本来是直接用 a 写的,href里放资源地址,target设为'_blank' ...

  6. js创建并下载文件

    先上代码: function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); va ...

  7. js 点击下载文件

    下载的文件类型如果浏览器不能打开会直接下载,能打开的需要后台在响应头部进行设定. Content-disposition 是 MIME 协议的扩展,MIME 协议指示 MIME 用户代理如何显示附加的 ...

  8. js 读取本地文件(必须通过input控件才能实现) 及 下载文件

    js 操作 文件的实现原理: 1.js是不能直接操作(读写)文件的,html的  input[type="file"] 控件是可以读取文件数据(获取文件数据流)的.js可以获取这个 ...

  9. js页面(页面上无服务端控件,且页面不刷新)实现请求一般处理程序下载文件方法

    对于js页面来说,未使用服务端控件,点击下载按钮时不会触发服务端事件,且不会提交数据到服务端页面后台进行数据处理,所以要下载文件比较困难.且使用jQ的post来请求一般处理程序也不能实现文件的下载,根 ...

随机推荐

  1. spring-mvc List及数组的配置接收

    数组接收 前台传递数组id 后台接收方式: public WebReturnObject deleteBatch(@RequestParam("id[]") String[] id ...

  2. Reverse Words in a String III

    Given a string, you need to reverse the order of characters in each word within a sentence while sti ...

  3. Linux安装mysql-5.7.17

    一.检查系统是否有自带安装MySQL 1.检查 [root@centos ~]# rpm -qa | grep -i mysql mysql-libs-5.1.71-1.el6.x86_64 2.卸载 ...

  4. Ubuntu下的终端多标签切换快捷键

    ubuntu下由于常在终端下工作,也同样需要在一个终端窗口下开启多个标签方便日常开发工作(vim党,尽量避免使用鼠标) 方法一: alt+1 alt+2 alt+3 方法二: ctrl + pageU ...

  5. python之线程学习

    一.进程与线程简介 进程 进程是程序的一次执行,由进程段.数据段.进程控制块三部分组成.具体三个基本状态,就绪.执行.阻塞,是一个拥有资源的独立单位. 线程 属于进程的一个实体,拥有极少的资源.也具有 ...

  6. python下selenium测试报告整合

    使用过一段时间的Robot Framework测试框架,测试之前需要先搭环境,需要安装的东西很多,这一点个人有些排斥. 每一个测试内容对应一个Test_Case,Robot有自己语法格式,如判断.循环 ...

  7. javascript中call()、apply()、bind()的用法终于理解

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows( ...

  8. java web 学习总结之 Servlet/JSP 编码问题

    Servlet和JSP编码问题 字节流: 1.得到OutputStream  字节流 OutputStream os = response.getOutputStream();   用默认编码输出数据 ...

  9. Java IO编程全解(一)——Java的I/O演进之路

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7419117.html JDK1.4之前的早期版本,Java对I/O的支持并不完善,开发人员在开发高性能I/O ...

  10. Prometheus 到底 NB 在哪里?- 每天5分钟玩转 Docker 容器技术(84)

    本节讨论 Prometheus 的核心,多维数据模型.我们先来看一个例子. 比如要监控容器 webapp1 的内存使用情况,最传统和典型的方法是定义一个指标 container_memory_usag ...