由導出數據到csv引出的Blob相關

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頭防亂碼。

// 你須要把數據拼接爲字符串，單元格與單元格用逗號(,)分隔， 行與行用換行符(\r\n)分隔。 如：
let content = '時間,正常(0<=評分<70),疑似(70<=評分<90),欺詐(90<=評分<=100),\r\n2017/09/07 00:00,0,0,0,\r\n2017/09/07 01:00,0,0,0,\r\n2017/09/07 02:00,0,0,0,\r\n2017/09/07 03:00,0,0,0,\r\n2017/09/07 04:00,0,0,0,\r\n2017/09/07 05:00,0,0,0,\r\n2017/09/07 06:00,0,0,0,\r\n2017/09/07 07:00,0,0,0,\r\n2017/09/07 08:00,0,0,0,\r\n2017/09/07 09:00,0,0,0,\r\n';
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提取二進制