先上代码:

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. 我的游戏学习日志3——三国志GBA

    我的游戏学习日志3——三国志GBA 三国志GBA由日本光荣公司1991~1995所推出<三国志>系列游戏,该作是光荣在GBA上推出的<三国志>系列作品的第一款.本游戏登场武将总 ...

  2. 日常训练 dfs 之 拓扑排序

    今天被拓扑排序给折磨了一天,主要就是我的一个代码有点小bug,真难找... 先来看看我今天写的题目吧! C. Fox And Names Fox Ciel is going to publish a ...

  3. Codeforces Round #546 (Div. 2) C. Nastya Is Transposing Matrices

    C. Nastya Is Transposing Matrices time limit per test 1 second memory limit per test 256 megabytes i ...

  4. python2.7 3.5 3.6 3.7 的不同

    https://blog.csdn.net/kwame211/article/details/77862166/

  5. 最简单的C#UDP通讯示例

    参考:https://www.cnblogs.com/zxyc2000/articles/2846662.html 和 https://www.cnblogs.com/mq0036/p/7302605 ...

  6. CROI R1

    $CROI$ $R1$ 今天参加了一场比赛,什么比赛呢?CROI. CROI是什么呢? $Challestend$ $Rehtorbegnaro$ $OI$.总的来说就是我们机房的一些神仙出的题啦. ...

  7. P2819 图的m着色问题(DFS)

    思路:最开始的回溯顺序是正常的图遍历的回溯顺序,其实也没有错.但是,因为怎么调都不对,看了题解.下面,请结合题解思路和代码一起感受一下回溯顺序的改变,算法的改变和代码在哪里实现了这种顺序. 回溯顺序: ...

  8. 【js】event(事件对象)详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

  9. 如何在关闭ssh连接的情况下,让进程继续运行?

    #screen 1 回车后进入Screen子界面,此时putty标题栏会指示处于子界面状态,然后运行你的程序 #应用程序名 1 然后按下Ctrl+A后抬起,然后按下d键,此时切换回主界面,Putty的 ...

  10. 正确生成浮点型的方法,解决sqlachemy Float浮点型的坑,生成float类型时,长度和精度均为0,导致查询不到结果!

    问题描述 在使用flask_sqlachemy时,给price字段选择了Float类型,数据库用的mysql,生成数据库表后,发现 from sqlalchemy import Float,Colum ...