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 parseInt() 函数的进制转换注意细节
Jan 08 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 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
PHP6 mysql连接方式说明
2009/02/09 PHP
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
简单了解python中的与或非运算
2019/09/18 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
最新创业融资计划书
2014/01/19 职场文书
运动会通讯稿50字
2014/01/30 职场文书
优秀教师工作感言
2014/02/16 职场文书
胡桃夹子观后感
2015/06/11 职场文书
小学教师读书笔记
2015/07/01 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python