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 miscellanea -display data real time, using window.status
Jan 09 Javascript
javascript之更有效率的字符串替换
Aug 02 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
浅谈redux以及react-redux简单实现
Aug 28 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
Phpbean路由转发的php代码
2008/01/10 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP类的反射用法实例
2014/11/03 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
javascript json2 使用方法
2010/03/16 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python实现简易学生信息管理系统
2020/04/05 Python
Python模块相关知识点小结
2020/03/09 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
携程英文网站:Trip.com
2017/02/07 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
SQL面试题
2013/12/09 面试题
行政副总岗位职责
2014/02/23 职场文书
环保标语大全
2014/06/12 职场文书
销售人员求职信
2014/07/22 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2015年市场部工作总结
2015/04/30 职场文书
追悼会家属答谢词
2015/09/29 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫