返回顶部
首页 > 资讯 > 前端开发 > 其他 >一文详解js如何用文件流下载csv文件
  • 717
分享到

一文详解js如何用文件流下载csv文件

javascriptcsv 2023-05-14 22:05:23 717人浏览 安东尼
摘要

本篇文章给大家带来了关于js+csv的相关知识,其中主要介绍了什么是Blob对象,怎么理解它以及如何使用文件流实现下载csv文件,感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助。js使用文件流下载csv文件的实现方法理解 Blob 对象

本篇文章给大家带来了关于js+csv的相关知识,其中主要介绍了什么是Blob对象,怎么理解它以及如何使用文件流实现下载csv文件,感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助。

一文详解js如何用文件流下载csv文件

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

理解 Blob 对象

在 Blob 对象出现之前,在 javascript 中一直没有比较好的方式处理二进制文件,自从有了 Blob 了,我们就可以使用它操作二进制数据了。

现在我们开始来理解下 Bolb 对象及它的文件流下载应用场景,话不多说了,来一起看看详细的介绍吧

  • 创建 Blob 对象方式如下:

var blob = new Blob(dataArray, options);

dataArray: 它是一个数组,它包含了要添加到 Blob 对象中的数据。数组可以是二进制对象或者字符串

options 是可选的对象参数,用于设置数组中数据的 MIME 类型。

  • 创建一个 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"}
  • 理解 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
  • 理解 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文件的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: 一文详解js如何用文件流下载csv文件

本文链接: https://lsjlt.com/news/206863.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 一文详解js如何用文件流下载csv文件
    本篇文章给大家带来了关于js+csv的相关知识,其中主要介绍了什么是Blob对象,怎么理解它以及如何使用文件流实现下载csv文件,感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助。js使用文件流下载csv文件的实现方法理解 Blob 对象...
    99+
    2023-05-14
    javascript csv
  • js中怎么用文件流下载csv文件
    这篇文章主要讲解了“js中怎么用文件流下载csv文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“js中怎么用文件流下载csv文件”吧!js使用文件流下载csv文件的实现方法理解 Blob ...
    99+
    2023-07-05
  • js如何实现文件流式下载文件
    在JavaScript中,可以使用Blob对象和URL.createObjectURL()方法来实现文件的流式下载。具体步骤如下:1...
    99+
    2023-08-09
    js
  • js实现文件流式下载文件方法详解及完整代码
    JS实现流式打包下载说明 浏览器中的流式操作可以节省内存,扩大 JS 的应用边界,比如我们可以在浏览器里进行视频剪辑,而不用担心视频文件将内存撑爆。 浏览器虽然有...
    99+
    2022-12-10
    js实现文件流下载 js实现文件下载 js实现大文件下载 js下载文件 js文件流下载 js下载文件源码 js文件流下载源码
  • 一文详解如何使用node执行js文件
    目录知识回顾CommentJS规范ECMAScript标准规范模块化CommonJS规范模块化总结知识回顾 I/O (Input/output)   &...
    99+
    2023-01-09
    node 执行js文件 node执行js文件 nodejs运行js代码
  • vue中如何下载excel流文件及设置下载文件名
    目录概述1、通过 url 下载2、通过 a 标签 download 属性结合 blob 构造函数下载3、通过 js-file-download 插件概述 导出excel需求,当点击下...
    99+
    2024-04-02
  • RestTemplate文件上传下载与大文件流式下载
    目录一、文件上传二、文件下载三、大文件下载本文是精讲RestTemplate第6篇,前篇的blog访问地址如下: RestTemplate在Spring或非Spring环境下使用精讲...
    99+
    2024-04-02
  • golang如何操作csv文件详解
    目录练习要求:考察点:编码:README.md附:使用Golang导出CSV数据并解决数据乱码问题CSV 格式实现方式golang实现csv数据写文件golang实现web导出csv...
    99+
    2024-04-02
  • 一文详解PHP用流方式实现下载文件(附代码示例)
    本篇文章给大家带来了关于PHP的相关知识,其中主要介绍了在PHP中怎么使用流方式来实现下载文件的,下面一起来看一下,希望对大家有帮助。PHP 中使用流方式下载文件在 PHP 中,可以使用 fopen () 函数打开一个远程文件,并使用流来下...
    99+
    2023-05-14
    流方式 php
  • php文件下载文件名乱码如何解决
    本篇内容主要讲解“php文件下载文件名乱码如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php文件下载文件名乱码如何解决”吧!php文件下载文件名乱码的解决办法:1、把“Content-...
    99+
    2023-07-04
  • PHP 如何解析 CSV 文件
    CSV 是一种文件类型。它表示逗号分隔的值 - Comma Separated Values 的首字母缩写。通常在其他软件(例如 Excel)中使用。这样可以将数据以表格格式保存,扩展名为 .csv。要使用...
    99+
    2024-02-27
  • 一文详解如何根据后端返回的url下载json文件
    目录需求场景描述实现思路分析完整的 demo 示例总结需求场景描述 有时候会遇到异步接口会返回一个 url 地址,然后前端需要根据这个 url 地址去下载文件资源的需求场景。 而这个...
    99+
    2024-04-02
  • 如何将一个CSV格式的文件分割成两个CSV文件
    目录将一个CSV格式的文件分割成两个CSV文件定义split_csv函数调用上述函数将CSV文件以某列为条件分类切割大概步骤上代码 将一个CSV格式的文件分割成两个CSV文...
    99+
    2024-04-02
  • vue如何使用文件流进行下载(newBlob)
    目录vue使用文件流进行下载(new Blob)封装方法vue下载文件流完整前后端代码vue使用文件流进行下载(new Blob) 封装方法 function getExel(url...
    99+
    2024-04-02
  • VBS如何下载文件
    这篇文章给大家分享的是有关VBS如何下载文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。BLOG备份脚本时发现 CDO.MESSAGE可以访问网络下载东西,说是研究研究或许可以用来当下载者用。 于是研究了一会。...
    99+
    2023-06-08
  • vue中怎么下载excel流文件及设置下载文件名
    这篇文章给大家分享的是有关vue中怎么下载excel流文件及设置下载文件名的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。概述导出excel需求,当点击下载模板或下载反馈结果,axios发起后端接口请求,返回的数据...
    99+
    2023-06-15
  • Ajax如何实现生成流文件下载
    这篇文章主要介绍Ajax如何实现生成流文件下载,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!代码如下:// 绑定导出按钮     $...
    99+
    2024-04-02
  • 如何使用ByteArrayOutputStream下载文件
    目录使用ByteArrayOutputStream下载文件使用POI导出数据,然后将其下载使用ByteArrayOutputStream解决IO乱码说下经过小结一下使用ByteArr...
    99+
    2024-04-02
  • 如何使用vbs下载文件
    这篇文章主要讲解了“如何使用vbs下载文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用vbs下载文件”吧!说到使用vbs下载文件是不是想到了XMLHTTP呢,呵呵,以下是比较经典的...
    99+
    2023-06-08
  • D3.js中如何读取CSV表格文件
    这篇文章将为大家详细讲解有关D3.js中如何读取CSV表格文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. CSV 格式是什么CSV(Comma Separated...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作