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 Event学习补遗 addEventSimple
Feb 11 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
JS控制表单提交的方法
Jul 09 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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
生成卡号php代码
2008/04/09 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php单例模式实现方法分析
2015/03/14 PHP
PHP正则验证Email的方法
2015/06/15 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP session 会话处理函数
2016/06/06 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
ext jquery 简单比较
2010/04/07 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Python入门学习之字符串与比较运算符
2015/10/12 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
linux系统都有哪些运行级别
2016/03/26 面试题
Ruby如何进行文件操作
2014/07/17 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
英文版银行求职信
2013/10/09 职场文书
一年级数学教学反思
2014/02/01 职场文书
揭牌仪式主持词
2014/03/19 职场文书
小学教师教育随笔
2015/08/14 职场文书