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优化技巧之短路表达式详细介绍
Mar 27 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
关于Promise 异步编程的实例讲解
Sep 01 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
基于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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
老同学聚会感言
2014/02/23 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
意向书范本
2014/07/29 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2014财务年度工作总结
2014/11/11 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python