js使用文件流下载csv文件的实现方法


Posted in Javascript onJuly 15, 2019

理解Blob对象

在Blob对象出现之前,在javascript中一直没有比较好的方式处理二进制文件,自从有了Blob了,我们就可以使用它操作二进制数据了。

现在我们开始来理解下Bolb对象及它的文件流下载应用场景,话不多说了,来一起看看详细的介绍吧

1. 创建Blob对象方式如下:

var blob = new Blob(dataArray, options);

dataArray: 它是一个数组,它包含了要添加到Blob对象中的数据。数组可以是二进制对象或者字符串。

options是可选的对象参数,用于设置数组中数据的MIME类型。

1. 创建一个DOMString对象的Blob对象。如下代码:

var str = "<div>Hello World</div>"; 
var blob = new Blob([str], {type: 'text/xml'}); 
console.log(blob); // 输出:Blob {size: 22, type: "text/xml"}

2. 理解URL.createObjectURL对象

window对象的URL对象是用来将blob或file读取成一个url的。

window.URL.createObjectURL(file / blob);

比如我现在结合上面的blob对象来生成一个url的简单demo实列如下所示:

var str = "<div>Hello World</div>"; 
var blob = new Blob([str], {type: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'});
console.log(blob); 

const url3 = window.URL.createObjectURL(blob);
console.log(url3);

如上代码第一个打印blob变量值如下:

Blob {size: 22, type: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"}

打印第二个url3变量值信息如下:

blob:null/2c75a56e-0104-4572-bc19-391d3bf93d9d

3. 理解HTML5中a标签的download属性

HTMl5中给a标签新增了一个download属性,只要我们设置该属性值,那么点击该链接时浏览器不会打开新链接,而是会直接下载文件,并且文件名就是 download 的属性值。

因此结合这个特点,我们就可以简单的实现文件流下载文件了,我们首先在原来的代码基础之上,再动态创建一个a链接,然后把该a标签的样式设置none, 该链接的 href属性 就是我们上面是有 window.URL.createObjectURL(blob); 生成的url,然后我们把 a链接的download属性设置下,该属性值就是我们的下载文件的文件名。最后触发点击功能即可下载了。如下代码:

var str = "<div>Hello World</div>"; 
var blob = new Blob([str], {type: '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'});
console.log(blob);
const url3 = window.URL.createObjectURL(blob);
console.log(url3);

var filename = '文件流下载' + '.csv';
const link = document.createElement('a');
link.style.display = 'none';
link.href = url3;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 #Javascript
微信小程序开发技巧汇总
Jul 15 #Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 #Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 #Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 #Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 #Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 #Javascript
You might like
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
javascript正则表达式总结
2016/02/29 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
vue实例的选项总结
2020/06/09 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python常用的json标准库
2019/02/19 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
python画图常规设置方式
2020/03/05 Python
python实现udp传输图片功能
2020/03/20 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
房地产出纳岗位职责
2013/12/01 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
公司租车协议书
2015/01/29 职场文书
违纪开除通知书
2015/04/25 职场文书
天鹅湖观后感
2015/06/09 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL