由导出数据到csv引出的Blob相关

MockingBird 发布于2019-08-21 16:20 / 646人阅读

摘要：直接通过构造函数进行创建。构造函数是一个对象，可以包含下面两个属性类型类型未知返回空字符串决定的数据格式数据中的如何被转换，可以取值为不变默认或者按操作系统转换方法返回一个新的对象，包含了源对象中指定范围内的数据。

front-end

前段时间项目中有个需求，将数据导出为csv。最近闲下来，整理下相关知识点。

What is Blob

一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。

通俗来说, Blob 是一个js对象类型，存着二进制数据。

How to use

直接通过构造函数进行创建。

构造函数:

Blob(blobParts[, options])

options是一个对象，可以包含下面两个属性：

type -- MIME类型, 类型未知返回空字符串

endings -- 决定 append() 的数据格式(数据中的 n 如何被转换)，可以取值为"transparent"(不变, 默认)或者"native"(按操作系统转换);

let debug = {debug: "this is a test"};
let blob = new Blob(JSON.stringify(debug, null, 2));

方法 slice

var blob = instanceOfBlob.slice([start [, end [, contentType]]]};

返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。

实例 使用 Blob 下载文件。

/**
 * 使用 Blob 下载文本，字符串，json
 *
 * @param {String} content 已转string的文本、json等
 * @param {String} filename 下载时文件取名为？
 **/
const funcDownload = (content, filename, type = "text/plain") => {
    let downLink = document.createElement("a");

    // 支持a链接下载？
    if (!("download" in downLink)) return false;

    downLink.download = filename;
    downLink.style.display = "none";

    // 字符串内容转blob地址
    let blobURL = new Blob([content], {type});
    downLink.href = URL.createObjectURL(blobURL);

    // 触发下载
    document.body.appendChild(downLink);
    downLink.click();

    // 移除 a 节点
    document.body.removeChild(downLink);
};

通过二进制传输图片的浏览器端处理

假设需求是这样的，二进制数据的第一位是一个标识符，指代该图的分类，之后是image的二进制数据。

ws.onmessage = (event) => {
    if(event.data.instanceof Blob) {
        let blob = event.data;

        // 拆分 blob
        const blobImgFlag = blob.slice(0, 1);
        const blobImg = blob.slice(1);

        // 将 blob 的 img flag 转成字符串
        let reader = new FileReader();
        reader.readAsBinaryString(blobImgFlag);

        // 读取成功 callback
        reader.onload = function (evt) {
            if(evt.target.readyState === FileReader.DONE) {
                const imgFlag = evt.target.result;

                // ... 根据得到的 imgFlag 做点啥， 如
                let img = document.getElementById(`img-${imgFlag}`);

                // 显示在页面中
                img.src = URL.createObjectURL(blogImg);
            }
        }
    }
}

将表格下载到 csv

这里其实用的就是第一个实例的方法，不过如果涉及到中文，需要指定下编码跟加上BOM头防乱码。

// 你需要把数据拼接为字符串，单元格与单元格用逗号(,)分隔， 行与行用换行符(
)分隔。 如：
let content = "时间,正常(0<=评分<70),疑似(70<=评分<90),欺诈(90<=评分<=100),
2017/09/07 00:00,0,0,0,
2017/09/07 01:00,0,0,0,
2017/09/07 02:00,0,0,0,
2017/09/07 03:00,0,0,0,
2017/09/07 04:00,0,0,0,
2017/09/07 05:00,0,0,0,
2017/09/07 06:00,0,0,0,
2017/09/07 07:00,0,0,0,
2017/09/07 08:00,0,0,0,
2017/09/07 09:00,0,0,0,
";
const fileName = "balabala.csv";

// 如果有问题，试试 "text/csv;chartset=utf-8"
const type = "text/plain;chartset=utf-8";

funcDownload(content, fileName, type);

Reference

MDN/API/Blob

js中从blob提取二进制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88414.html

使用Data URI Scheme优雅的实现前端导出csv

摘要：受限于请求需要后端分页接口性能等原因不得不放弃的导出方式。所以我需要寻找一种可行的合理的优雅的导出方案，那就是。方案实现方案介绍是利用标签的和属性来实现的。至此，这个问题算是完整的解决了。问题描述项目里需要实现一个导出csv的功能，这是个老生常谈的需求，而且我们使用的是iview的组件库，按道理说实现起来应该简单，但实则不然，我在做的时候遇到了一些问题。受限于请求需要token、后...

liujs 2019-08-23 15:15 评论0 收藏0
彻底理解使用JavaScript 将Json数据导出CSV文件

摘要：前言将数据报表导出，是数据报告展示常用的附带功能。今天我们主要讲的是直接通过前端将数据导出的格式的文件。但其实真正的答案应该是把相应的数据转换成和。若是超过浏览器自身限制的最大长度，会导致下载失败。前言将数据报表导出，是web数据报告展示常用的附带功能。通常这种功能都是用后端开发人员编写的。今天我们主要讲的是直接通过前端js将数据导出Excel的CSV格式的文件。原理首先在本地...

jsliang 2019-08-01 17:42 评论0 收藏0
彻底理解使用JavaScript 将Json数据导出CSV文件

摘要：前言将数据报表导出，是数据报告展示常用的附带功能。今天我们主要讲的是直接通过前端将数据导出的格式的文件。但其实真正的答案应该是把相应的数据转换成和。若是超过浏览器自身限制的最大长度，会导致下载失败。前言将数据报表导出，是web数据报告展示常用的附带功能。通常这种功能都是用后端开发人员编写的。今天我们主要讲的是直接通过前端js将数据导出Excel的CSV格式的文件。原理首先在本地...

hyuan 2019-08-21 16:48 评论0 收藏0
文件下载那点事

摘要：不过这种方式有问题，目前查到的大部分过程都是会在服务器新建出一个文件，等下载完毕在做删除，还没有找到可以跨过这一步的方式。 showImg(https://segmentfault.com/img/remote/1460000018850368); Content-Disposition / Content-Type Content-Disposition http 头部的 Conte...

PascalXie 2019-08-23 16:54 评论0 收藏0