原理其实很简单,我们可以将文本或者JS字符串信息借助Blob转换成二进制,然后,作为<a>元素的href属性,配合download属性,实现下载。

代码也比较简单,如下示意(兼容Chrome和Firefox):

var funDownload = function (content, filename) {
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};

  其中,content指需要下载的文本或字符串内容,filename指下载到系统中的文件名称。

funDownload(textarea.value, 'test.html');	

不止是.html文件,.txt.json等只要内容是文本的文件,都是可以利用这种小技巧实现下载的。

在Chrome浏览器下,模拟点击创建的<a>元素即使不append到页面中,也是可以触发下载的,但是在Firefox浏览器中却不行,因此,上面的funDownload()方法有一个appendChildremoveChild的处理,就是为了兼容Firefox浏览器。

download属性从Edge13开始支持,理论上,edge也应该支持直接JS触发的浏览器文件下载

借助HTML5 Blob实现文本信息文件下载的更多相关文章

  1. HTML5实现获取地理位置信息并定位功能

    HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...

  2. AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能

    HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...

  3. Web Scraper 高级用法——利用正则表达式筛选文本信息 | 简易数据分析 17

    这是简易数据分析系列的第 17 篇文章. 学习了这么多课,我想大家已经发现了,web scraper 主要是用来爬取文本信息的. 在爬取的过程中,我们经常会遇到一个问题:网页上的数据比较脏,我们只需要 ...

  4. zx-editor 移动端(HTML5)富文本编辑器,可与原生App混合(hybrid)开发

    ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址 ...

  5. Html5 Geolocation获取地理位置信息

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  6. iOS开发那些事-iOS应用本地化-文本信息本地化

    文本信息本地化在本地化工作中占有很大的比例.包括了:应用名称本地化.系统按钮和信息本地化,以及静态文本信息本地化. 系统按钮和信息本地化 还记得天气预报应用背后的“完成”按钮吗,它在中文环境下是“完成 ...

  7. RichTextBox控件-主要用于输入输出编辑文本信息

    1.在RichTextBox控件中添加超链接文字 private void btn_Add_Click(object sender, EventArgs e) { rtbox_HyperLink.Ap ...

  8. 使用freemaker 导出word 含多张图片,若无图片则显示文本信息

    1.使用的Microsoft Office 2007,添加一个无边框的表格,并插入一张图片,最后另存为编码utf-8,一开始保存的word xml格式的,图片的base64编码位于文档最后,暂时没有找 ...

  9. [日常] Go-逐行读取文本信息

    go逐行读取文本信息:1.os包提供了操作系统函数的不依赖平台的接口,Open方法打开一个文件用于读取,func Open(name string) (file *File, err error)2. ...

随机推荐

  1. 【C++】线程_beginthreadex参数说明

    unsigned long _beginthreadex( void * _Security, //第1个参数:安全属性,NULL为默认安全属性 unsigned _StackSize, //第2个参 ...

  2. php下保存远程图片到本地的函数

    <?php header("content-type:text/html;charset=utf-8"); function GrabImage($url,$filename ...

  3. 搜集的一些酷炫的金属色 ,RGB值 和大家分享一下

    开发iOS程序过程中会使用到RGB,要注意每个RGB值都要除以 255.0 ,注意: ' .0 ' 不能省!! 一下是本人搜集的一些酷炫金属色的RGB值:   黄金 242,192,86 石墨 87, ...

  4. sip 认证分析

    转自:http://blog.csdn.net/wangqi0079/article/details/11569489 SIP类似Http协议.其认证模式也一样.Http协议(RFC 2616 )规定 ...

  5. 几个shell程序设计小知识(shell常识部分)

    [转自]http://blog.chinaunix.net/uid-168249-id-2860686.html 引用:一.用户登陆进入系统后的系统环境变量:  $HOME 使用者自己的目录  $PA ...

  6. Unity3D的Time.timeScale

    (1)Time.timeScale = 0可以暂停游戏,Time.timeScale = 1恢复正常,但这是作用于整个游戏的设置,不单单是当前场景,记得在需要的时候重置回Time.timeScale ...

  7. 基于FP-Growth算法的关联性分析——学习笔记

    数据挖掘 比之前的Ap快,因为只遍历两次. 降序 一.构建FP树 对频繁项集排序,以构成共用关系. 二.基于FP树的频繁项分析 看那个模式基出现过几次.频繁度. 看洗发液的 去掉频繁度小的 构建洗发液 ...

  8. VS 清除编译产生的临时文件、文件夹

    VS编译过程中会产生一些临时文件,通过以下脚本可清除 @echo off for /r %%i in (*.sdf,*.ncb,*.suo,*.exp,*.user,*.aps,*.idb,*.dep ...

  9. ModelState.AddModelError使用

    后台: ModelState.AddModelError("userPwd", "请输入密码!"); ModelState是一个字典类型,这句话的作用是向Mod ...

  10. module、applet

    Each Module is developed as a standalone Windows DLL.Each module can contain one or more applets, an ...