借助HTML5 Blob实现文本信息文件下载
原理其实很简单,我们可以将文本或者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()
方法有一个appendChild
和removeChild
的处理,就是为了兼容Firefox浏览器。
download
属性从Edge13开始支持,理论上,edge也应该支持直接JS触发的浏览器文件下载
借助HTML5 Blob实现文本信息文件下载的更多相关文章
- HTML5实现获取地理位置信息并定位功能
HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5.百度地图.谷歌地图等三种获取理位置信息并 ...
- Web Scraper 高级用法——利用正则表达式筛选文本信息 | 简易数据分析 17
这是简易数据分析系列的第 17 篇文章. 学习了这么多课,我想大家已经发现了,web scraper 主要是用来爬取文本信息的. 在爬取的过程中,我们经常会遇到一个问题:网页上的数据比较脏,我们只需要 ...
- zx-editor 移动端(HTML5)富文本编辑器,可与原生App混合(hybrid)开发
ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址 ...
- Html5 Geolocation获取地理位置信息
Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...
- iOS开发那些事-iOS应用本地化-文本信息本地化
文本信息本地化在本地化工作中占有很大的比例.包括了:应用名称本地化.系统按钮和信息本地化,以及静态文本信息本地化. 系统按钮和信息本地化 还记得天气预报应用背后的“完成”按钮吗,它在中文环境下是“完成 ...
- RichTextBox控件-主要用于输入输出编辑文本信息
1.在RichTextBox控件中添加超链接文字 private void btn_Add_Click(object sender, EventArgs e) { rtbox_HyperLink.Ap ...
- 使用freemaker 导出word 含多张图片,若无图片则显示文本信息
1.使用的Microsoft Office 2007,添加一个无边框的表格,并插入一张图片,最后另存为编码utf-8,一开始保存的word xml格式的,图片的base64编码位于文档最后,暂时没有找 ...
- [日常] Go-逐行读取文本信息
go逐行读取文本信息:1.os包提供了操作系统函数的不依赖平台的接口,Open方法打开一个文件用于读取,func Open(name string) (file *File, err error)2. ...
随机推荐
- spring只是一个框架
想跟着 spring in action 4 系统的研究下spring,结果发现忘了怎么建一个spring项目. 关键是,不知道该建一个什么项目,Java项目?Maven项目(Java项目?Web项目 ...
- 第二百九十五节,python操作redis缓存-字符串类型
python操作redis缓存-字符串类型 首先要安装redis-py模块 python连接redis方式,有两种连接方式,一种是直接连接,一张是通过连接池连接 注意:以后我们都用的连接池方式连接,直 ...
- MySQL常用shell语句
1.连接数据库 格式:mysql -h ip -P port -u user -p 2.修改某一列的值 格式:update tablename set column1 = 'xxx', column2 ...
- gsoap简介
gSoap是什么? 请进 官方网站 http://genivia.com/index.html 这里更直接 http://www.cs.fsu.edu/~engelen/soap.html 英语水平很 ...
- Spring配置文件加载流程
http://blog.csdn.net/dy_paradise/article/details/6038990
- C++ string(转)
C++中string是标准库中一种容器,相当于保存元素类型为char的vector容器(自己理解),这个类提供了相当丰富的函数来完成对字符串操作,以及与C风格字符串之间转换,下面是对string一些总 ...
- CSS Sprite的应用
什么是CSS Sprite ? 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON,栏目背景啊,图片按钮啊等都有会有规则的合并 ...
- 基于nodejs的开源博客
https://github.com/hexojs/hexo https://hexo.io/zh-cn/docs/ markdown编辑器 http://pandao.github.io/edito ...
- iOS根据文字字数动态确定Label宽高
我们有时候在写项目的时候,会碰到,意见反馈,还有其他地方,讲座活动细则等需要大篇展示的文本, 因为每次服务器返回的内容大小不一,所以需要动态的调整label的宽高: 在ios 6 的时候可以: -(v ...
- ZooKeeper(六)-- CAP和BASE理论、ZAB协议
一.CAP理论和BASE理论 1.CAP理论 CAP理论,指的是在一个分布式系统中,不可能同时满足Consistency(一致性). Availability(可用性).Partition toler ...