原理其实很简单,我们可以将文本或者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. 第三百零三节,Django框架介绍——用pycharm创建Django项目

    Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...

  2. sql字符串的拼接 (字符串和二进制,erlang的mysql驱动)

    1> list_to_binary(["select * from aa limit","1",",","97"] ...

  3. iOS10.0 & Swift 3.0 对于升级项目的建议

    iOS & Swift新旧版本更替, 在Apple WWDC大会开始之际, 也迎来了iOS 10.0, Swift 3.0 测试版, 到目前为止, 已经是测试版2.0, 每次更新都带来了新的语 ...

  4. 监听程序未启动或数据库服务未注册到该监听程序。启动该监听程序并注册数据库服务 然后重新运行 em configuration assistant。

    在WIN 7/64Bit上安装ORACLE 11gR2后,管理网页Database Control(如:https://localhost:1158/em)始终登录不进去,总是说密码错误,使用配置工具 ...

  5. SharePoint 2013 一次性上传文件大小限制

    默认是250MB,最大一次上传文件不超过2G The defaut size is 250MB and maximun upload size is 2047MB. It's can't greate ...

  6. 【转】Internet与Intranet区别

    提起Internet,大家都知道它是一个蓬勃发展的国际互联网. 而Intranet则是近两年才发展起来的新事物,通常被称作企业内部网. Internet是一组全球范围内信息资源的名字.这些资源非常巨大 ...

  7. 运行 3ds Max 时出现的性能问题

          运行 3ds Max 时性能减慢或迟缓通常是由于视频配置冲突或内存分配问题引起的.关于性能问题的一大难点在于缩小范围确定问题原因.以下是一些限制 3ds Max 操作的常见情形,以及纠正这 ...

  8. mybatis之parameterType传递多个参数

    当在查询的时候需要传入多个参数的时候该怎么办呢: 1,封装成一个Model对象,底层HashMap还是一个 User user=new User(); user.setUserName("z ...

  9. UART简介

    经常遇到初学者,对单片机串行通讯出了问题不知道如何办的情况.其实最有效的调试方法是用示波器观察收发数据的波形.通过观察波形可以确定以下情况: 1.数据是否接收或发送: 2.数据是否正确: 3.波特率是 ...

  10. 你知道js当中for循环当中的bug吗,如何解决它

    本来以为for循环可以很好的解决一切问题,直到今天遇到了这段代码,刷新了我对for循环的认识,话不多说,直接上代码 var arr = [];for(var i = 0;i<10;i++) { ...