先上代码:

function createAndDownloadFile(fileName, content) {
var aTag = document.createElement('a');
var blob = new Blob([content]);
aTag.download = fileName;
aTag.href = URL.createObjectURL(blob);
aTag.click(); // 模拟点击
URL.revokeObjectURL(blob);
}
fileName:文件名称
content:文件内容

直接调用这个方法,传入文件名和文件内容,程序新建 a 标签,新建 Blob 对象,将文件名赋给 a 标签,同时将 Blob 对象作为 Url 也赋给 a 标签,模拟点击事件,自动下载成功,最后再回收内存。

Blob 对象

Blob 对象是一个字节序列。拥有 sizetype 等属性。·

拥有 2 个只读状态 OPENDCLOSED。

js创建并下载文件的更多相关文章

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

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

  2. [转] 使用 JavaScript 创建并下载文件

    [From] https://gaohaoyang.github.io/2016/11/22/js-create-file-and-download/ 本文将介绍如何使用 JavaScript 创建文 ...

  3. 使用 JavaScript 创建并下载文件

    先上代码 Blob 对象 Blob URLs 模拟 click 小结 参考 本文将介绍如何使用 JavaScript 创建文件,并自动/手动将文件下载.这在导出原始数据时会比较方便. 先上代码 /** ...

  4. js之Ajax下载文件

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

  5. js实现前端下载文件

    在前端下载文本格式的文件时,可采用下面的方式: (1)创建基于文件内容的Blob对象: (2)通过URL上的createObjectURL方法,将blob对象转换成一个能被浏览器解析的文件地址. (3 ...

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

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

  7. js从服务器下载文件

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

  8. js通过 URL下载文件

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

  9. js 点击下载文件

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

随机推荐

  1. 我为什么要写 blog?

    从事软件测试工作10余年,也没在网上留下些什么.最近忙着找工作,年龄上又遇到了瓶颈,发现好多工作岗位需要技术博客,正好趁这个机会,梳理一下自己的知识点,记录下来和大家一起学习探讨,共同进步.欢迎加我微 ...

  2. element ui Angular学习笔记(一)

    1.element ui安装 npm i --save element-angular 2.Angular-cli引入 引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入El ...

  3. 7.01-beautiful_soup

    # pip install beautifulsoup4 from bs4 import BeautifulSoup html_doc = """ <html> ...

  4. 安装Anaconda 之后使用ubuntu自带python

    我们知道,Ubantu系统会自带python,当你在terminal窗口中输入python,就会显示默认安装的python的信息.比如我的16.04就自带了python2.7和3.5,但是安装了Ana ...

  5. redis在.net架构中的应用(1)--使用servicestack连接redis

    引言:作为少有的.net架构下的大型网站,stackoverflow曾发表了一篇文章,介绍了其技术体系,原文链接http://highscalability.com/blog/2011/3/3/sta ...

  6. Go调试工具—— Delve

    参考https://github.com/go-delve/delve 安装 首先你必须有等于或高于1.8版本的Go,我的版本是: userdeMBP:go-learning user$ go ver ...

  7. docker 14 dockerfile自定义mycentos

    Base镜像(scratch) Docker Hub中99%的镜像是通过在base镜像中安装和配置需要的软件构建出来的.也就是说base镜像是所有其他镜像的鼻祖. hub默认centos镜像是什么情况 ...

  8. RMAN_RAC归档日志备份包恢复到单机

    恢复归档日志的方法: RAC是ASM的存储且是OMF创建的格式,所以RAC的日志名为如下+ARCH/mioa/archive/1_73554_875548170.dbf.+ARCH/mioa/arch ...

  9. 获取数值型数组的最大值和最小值,使用遍历获取每一个值,然后记录最大值和最小值的方式。(数组遍历嵌套if判断语句)

    package com.Summer_0420.cn; /** * @author Summer * .获取数值型数组的最大值.最小值 * 方法:遍历获取每一个值,记录最大值: * 方法:遍历获取每一 ...

  10. 洛谷 P1706 全排列问题

    题目链接 https://www.luogu.org/problemnew/show/P1706 题目描述 输出自然数1到n所有不重复的排列,即n的全排列,要求所产生的任一数字序列中不允许出现重复的数 ...