js使用文件流下载csv文件的实现方法

理解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();

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • JavaScript将数组转换成CSV格式的方法

    本文实例讲述了JavaScript将数组转换成CSV格式的方法.分享给大家供大家参考.具体分析如下: JavaScript中数组对象的valueOf方法可以将数组的值输出为逗号分割的字符串,下面的代码演示了如何将数组抓换成逗号和竖线分割的字符串 var fruits = ['apple', 'peaches', 'oranges', 'mangoes']; var str = fruits.valueOf(); //输出结果: apple,peaches,oranges,mangoes 如果希望

  • js读取csv文件并使用json显示出来

    js读取csv文件并使用json显示出来

    摘要: 前面分享了用js将json数据下载为csv文件,方便后期管理.但是对于测试人员更希望能够以页面的形式展现任务,所以就做了一个将csv文件展现在页面上的例子. 代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />     <ti

  • javascript实现客户端兼容各浏览器创建csv并下载的方法

    本文实例讲述了javascript实现客户端兼容各浏览器创建csv并下载的方法.分享给大家供大家参考.具体实现方法如下: $("#radarDLBut").click(function(){ var data = [displayData["radar_chart"]["r_label"],displayData["radar_chart"]["r_default"]]; var csvContent =

  • 使用javascript实现json数据以csv格式下载

    使用javascript实现json数据以csv格式下载

    摘要: 最近有一个非项目的小需求,就是将项目开发分工文件化,方便后期管理维护.但是开发时,分工安排都是以json格式记录的,所以就做了一个将json数据以csv格式下载到本地. 代码: 复制代码 代码如下: <!DOCTYPE html> <html>     <title>download csv</title>     <head>         <script src="http://code.jquery.com/jqu

  • D3.js进阶系列之CSV表格文件的读取详解

    D3.js进阶系列之CSV表格文件的读取详解

    前言 之前在入门系列的教程中,我们常用 d3.json() 函数来读取 json 格式的文件.json 格式很强大,但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件,因为简单易懂,容易编辑. Microsoft Excel 通常会保存为 xls 格式, OpenOffice Calc 通常会保存为 ods 格式.这些格式作为表格文件来说都很强大,但要读取它们是有些麻烦的,D3 中也没有提供这样的方法.但是表格软

  • JS兼容浏览器的导出Excel（CSV）文件的方法

    Js导出表格为Excel文件 的常见一种办法是调用:ActiveXObject("Excel.Application") ,但是这种方法有局限性,只能在IE系列下的浏览器里实现,兼容性方面不理想. 经测试,采用本文推荐的方法能兼容性较好的导出表格内容到Excel文件. 复制代码 代码如下: var str = "博客, 域名\nBlog, 2\njb51.net, 3";var uri = 'data:text/csv;charset=utf-8,' + str;

  • js使用文件流下载csv文件的实现方法

    理解Blob对象 在Blob对象出现之前,在javascript中一直没有比较好的方式处理二进制文件,自从有了Blob了,我们就可以使用它操作二进制数据了. 现在我们开始来理解下Bolb对象及它的文件流下载应用场景,话不多说了,来一起看看详细的介绍吧 1. 创建Blob对象方式如下: var blob = new Blob(dataArray, options); dataArray: 它是一个数组,它包含了要添加到Blob对象中的数据.数组可以是二进制对象或者字符串. options是可选的对

  • Java用文件流下载网络文件示例代码

    复制代码 代码如下: public HttpServletResponse download(String path, HttpServletResponse response) {        try {            // path是指欲下载的文件的路径.            File file = new File(path);            // 取得文件名.            String filename = file.getName();          

  • JS实现导出Excel和CSV文件操作

    一.js导出Excel <html> <head> </head> <body> <script type="text/javascript" src="./xlsx.core.min.js"></script> <script type="text/javascript"> /** * 通用的打开下载对话框方法,没有测试过具体兼容性 * @param url 下

  • 如何利用python web框架做文件流下载的实现示例

    hello 大家好, 前不久公司里有个需求,把时序数据库中的日志下载到本地. 大家都知道. 数据库里的数据 都是存在数据库里的(废话). 想把他下载到客户的本地. 有的同学第一反应是: 只有文件才能下载. 所以大多数同学会想到先把数据从数据库中读出来,然后写入到服务器中的某个文件夹下生成文件, 然后再下载. 其实这是非常不效率的方法, 最简单的方法是,我们从数据库中读取到文件后, 直接以流的形式让用户去下载. 这里我拿python flask框架来做例子,其实非常简单,步骤一共有3个 1: 取出

  • C#文件流进行压缩和解压缩的方法

    本文实例讲述了C#文件流进行压缩和解压缩的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using System.IO.Compression; using System.Linq; using System.Text; usi

  • C#从文件流读取xml文件到DataSet并显示的方法

    本文实例讲述了C#从文件流读取xml文件到DataSet并显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: DataSet ds= new DataSet (); FileStream fs = new FileStream (Server.MapPath=("somexml.xml"),FileMode.Open,FileAccess.Read); ds.ReadXml (fs); DataGrid1.DataSource = ds; DataGrid1.D

  • mysql实现查询结果导出csv文件及导入csv文件到数据库操作

    本文实例讲述了mysql实现查询结果导出csv文件及导入csv文件到数据库操作.分享给大家供大家参考,具体如下: mysql 查询结果导出csv文件: select logtime, operatingsystem, imei from GameCenterLogs where operatingsystem >= 1 and operatingsystem <=3 group by operatingsystem,imei into outfile '/tmp_logs/tmp.csv' f

  • Python读取mat文件,并转为csv文件的实例

    初学Python,遇到需要将mat文件转为csv文件,看了很多博客,最后找到了解决办法,代码如下: #方法1 from pandas import Series,DataFrame import pandas as pd import numpy as np import h5py datapath = 'E:/workspacelxr/contem/data.mat' file = h5py.File(datapath,'r') file.keys() def Print(name):prin

  • JS实现弹出下载对话框及常见文件类型的下载

    JS实现弹出下载对话框及常见文件类型的下载

    1.写在前面 JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能. 这里所说的下载,有时候也可以理解为保存.出于安全考虑,JS肯定无法直接调用FileAPI写文件到磁盘,但是却可以通过下载来变相实现保存功能. 2.几个备用知识点 2.1. JS触发单击事件 既然是用A标签模拟,那么肯定要知道JS如何主动触发单击事件. 最简单的触发单击事件肯定是elem.clic

  • PHP下载生成的csv文件及问题总结

    最近做了一个项目需要把订单的信息显示出来,并且能够把相关信息放到一个.csv 文件中,下载到浏览器.虽然说csv是一种比较简单的excel表格形式,生成只要按指定格式然后生成.csv文件就可以,但是在使用中也会遇到很多问题,下面给大家分享下PHP下载csv文件及问题总结 首先大家先看个例子,生成csv文件并下载 //要生成csv文件的数组 $csvArr=array(); $csvArr[]=array('用户编号1','上班日期1','签到时间1','签退时间1'); $csvArr[]=ar

随机推荐