js实现使用文件流下载csv文件
1. 理解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();
js实现使用文件流下载csv文件的更多相关文章
- c# 简单文件流读写CSV文件
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...
- js文件流下载通用方法
通常我们会用到文件流下载文件,下面给大家一个通用的文件流下载的js /* *下载文件 * options:{ * url:'', //下载地址 * isNewWinOpen:false,是否新窗口打开 ...
- js 前端实现文件流下载的几种方式
后端是用Java写的一个下载的接口,返回的是文件流,需求:点击,请求,下载 利用iframe实现文件流下载 //把上一次创建的iframe删掉,不然随着下载次数的增多页面上会一堆的iframe var ...
- response下载csv文件内容乱码问题
response下载csv文件内容乱码问题 解决办法:在输出流语句第一行输出 out.write(new byte[]{(byte)0xEF, (byte)0xBB, (byte)0xBF}); Se ...
- 文件流下载时 axios blob文件大小不正确?
文件流下载时 js blob文件大小不正确? res.data的字节长度 length blob.size匹配不上.. axio请求里必须修改 responseType: 'blob' 参数, 默认是 ...
- 利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码,文件内容乱码
利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码,文件内容乱码 2014-07-31 12:53 1047人阅读 评论(0) 收藏 ...
- 108.生成和下载csv文件
生成CSV文件 有时候我们做的网站,需要将一些数据,生成一个csv文件返回浏览器,并且是作为附件的形式下载下来. 生成小的csv文件: 生成一个小的csv文件,我们用Python内置的csv模块来处理 ...
- 数据存储之json文件处理和csv文件处理
什么是json: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集,采用 ...
- C++学习47 文件的概念 文件流类与文件流对象 文件的打开与关闭
迄今为止,我们讨论的输入输出是以系统指定的标准设备(输入设备为键盘,输出设备为显示器)为对象的.在实际应用中,常以磁盘文件作为对象.即从磁盘文件读取数据,将数据输出到磁盘文件.磁盘是计算机的外部存储器 ...
随机推荐
- 对复杂字典Dictionary<T1,T2>排序问题
原文:对复杂字典Dictionary<T1,T2>排序问题 //VoltageCount类(电压值对应的数量): public class VoltageCount { ...
- Thinkphp模板开放给第三方编辑权限时,如何禁止模板使用php代码
首先我要吐槽一个问题:为什么在博客园发布的文章总是被其他网站采集过去,而他们采集过去后,排名比博客园还好,比如这篇文章,我把标题复制到百度搜索,结果第一页的搜索结果全部都是采集我的,而我在博客园发布的 ...
- xadmin下设置“use_bootswatch = True”无效解决方法
from xadmin import viewsimport xadmin class BaseSetting(object): enable_themes=True use_bootswatch=T ...
- PySide——Python图形化界面入门教程(六)
PySide——Python图形化界面入门教程(六) ——QListView和QStandardItemModel 翻译自:http://pythoncentral.io/pyside-pyqt-tu ...
- Android零基础入门第19节:Button使用详解
原文:Android零基础入门第19节:Button使用详解 Button(按钮)是Android开发中使用非常频繁的组件,主要是在UI界面上生成一个按钮,该按钮可以供用户单击,当用户单击按钮时,按钮 ...
- Docker镜像与容器命令 专题
https://yeasy.gitbooks.io/docker_practice/content/install/mirror.html docker的工作流程图: 至少需要配备三样东西去使用doc ...
- 数据库连接池之_Druid简单使用
数据库连接池: 连接池是创建和管理一个连接的缓冲池的技术,这些连接真备好被任何需要他们的线程使用,可以对传统的JDBCjava数据库连接()进行优化 在实际开发中,我们需要频繁的操作数据库,这就意味着 ...
- QT---Native Wifi functions 应用(WiFi有密码连接)
实现功能 无线网卡列表 无线热点扫面 无线连接(有密码,配置文件连接方式) 无线断开 重命名本地无线名(两种方式) 删除无线配置文件 开启和关闭 ...
- nginx 配置https并自签名证书
2016-10-28 转载请注明出处:http://daodaoliang.com/ 作者: daodaoliang 版本: V1.0.1 邮箱: daodaoliang@yeah.net 参考链接: ...
- LigerUI Dialog 滚动条问题
LigerUI 使用Dialog时,自动显示滚动条无法隐藏.设置css 取消滚动条,不影响页面滚动条 .l-dialog-content { overflow: hidden;}