国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

由導(dǎo)出數(shù)據(jù)到csv引出的Blob相關(guān)

MockingBird / 647人閱讀

摘要：直接通過構(gòu)造函數(shù)進(jìn)行創(chuàng)建。構(gòu)造函數(shù)是一個對象，可以包含下面兩個屬性類型類型未知返回空字符串決定的數(shù)據(jù)格式數(shù)據(jù)中的如何被轉(zhuǎn)換，可以取值為不變默認(rèn)或者按操作系統(tǒng)轉(zhuǎn)換方法返回一個新的對象，包含了源對象中指定范圍內(nèi)的數(shù)據(jù)。

front-end

前段時間項(xiàng)目中有個需求，將數(shù)據(jù)導(dǎo)出為csv。最近閑下來，整理下相關(guān)知識點(diǎn)。

What is Blob 
一個 Blob對象表示一個不可變的, 原始數(shù)據(jù)的類似文件對象。Blob表示的數(shù)據(jù)不一定是一個JavaScript原生格式。 File 接口基于Blob，繼承 blob功能并將其擴(kuò)展為支持用戶系統(tǒng)上的文件。

通俗來說, Blob 是一個js對象類型，存著二進(jìn)制數(shù)據(jù)。

How to use

直接通過構(gòu)造函數(shù)進(jìn)行創(chuàng)建。

構(gòu)造函數(shù): 
Blob(blobParts[, options])

options是一個對象，可以包含下面兩個屬性：

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

endings -- 決定 append() 的數(shù)據(jù)格式(數(shù)據(jù)中的 n 如何被轉(zhuǎn)換)，可以取值為"transparent"(不變, 默認(rèn))或者"native"(按操作系統(tǒng)轉(zhuǎn)換);

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 對象中指定范圍內(nèi)的數(shù)據(jù)。

實(shí)例 使用 Blob 下載文件。 
/**
 * 使用 Blob 下載文本，字符串，json
 *
 * @param {String} content 已轉(zhuǎn)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";

    // 字符串內(nèi)容轉(zhuǎn)blob地址
    let blobURL = new Blob([content], {type});
    downLink.href = URL.createObjectURL(blobURL);

    // 觸發(fā)下載
    document.body.appendChild(downLink);
    downLink.click();

    // 移除 a 節(jié)點(diǎn)
    document.body.removeChild(downLink);
};
通過二進(jìn)制傳輸圖片的瀏覽器端處理

假設(shè)需求是這樣的，二進(jìn)制數(shù)據(jù)的第一位是一個標(biāo)識符，指代該圖的分類，之后是image的二進(jìn)制數(shù)據(jù)。

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 轉(zhuǎn)成字符串
        let reader = new FileReader();
        reader.readAsBinaryString(blobImgFlag);

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

                // ... 根據(jù)得到的 imgFlag 做點(diǎn)啥， 如
                let img = document.getElementById(`img-${imgFlag}`);

                // 顯示在頁面中
                img.src = URL.createObjectURL(blogImg);
            }
        }
    }
}
將表格下載到 csv

這里其實(shí)用的就是第一個實(shí)例的方法，不過如果涉及到中文，需要指定下編碼跟加上BOM頭防亂碼。

// 你需要把數(shù)據(jù)拼接為字符串，單元格與單元格用逗號(,)分隔， 行與行用換行符(
)分隔。 如：
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提取二進(jìn)制

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88414.html

相關(guān)文章

  • 使用Data URI Scheme優(yōu)雅的實(shí)現(xiàn)前端導(dǎo)出csv

    摘要：受限于請求需要后端分頁接口性能等原因不得不放棄的導(dǎo)出方式。所以我需要尋找一種可行的合理的優(yōu)雅的導(dǎo)出方案，那就是。方案實(shí)現(xiàn)方案介紹是利用標(biāo)簽的和屬性來實(shí)現(xiàn)的。至此，這個問題算是完整的解決了。 問題描述 項(xiàng)目里需要實(shí)現(xiàn)一個導(dǎo)出csv的功能，這是個老生常談的需求，而且我們使用的是iview的組件庫，按道理說實(shí)現(xiàn)起來應(yīng)該簡單，但實(shí)則不然，我在做的時候遇到了一些問題。受限于請求需要token、后...

    liujs 評論0 收藏0

  • 徹底理解使用JavaScript 將Json數(shù)據(jù)導(dǎo)出CSV文件

    摘要：前言將數(shù)據(jù)報表導(dǎo)出，是數(shù)據(jù)報告展示常用的附帶功能。今天我們主要講的是直接通過前端將數(shù)據(jù)導(dǎo)出的格式的文件。但其實(shí)真正的答案應(yīng)該是把相應(yīng)的數(shù)據(jù)轉(zhuǎn)換成和。若是超過瀏覽器自身限制的最大長度，會導(dǎo)致下載失敗。 前言 將數(shù)據(jù)報表導(dǎo)出，是web數(shù)據(jù)報告展示常用的附帶功能。通常這種功能都是用后端開發(fā)人員編寫的。今天我們主要講的是直接通過前端js將數(shù)據(jù)導(dǎo)出Excel的CSV格式的文件。 原理 首先在本地...

    jsliang 評論0 收藏0

  • 徹底理解使用JavaScript 將Json數(shù)據(jù)導(dǎo)出CSV文件

    摘要：前言將數(shù)據(jù)報表導(dǎo)出，是數(shù)據(jù)報告展示常用的附帶功能。今天我們主要講的是直接通過前端將數(shù)據(jù)導(dǎo)出的格式的文件。但其實(shí)真正的答案應(yīng)該是把相應(yīng)的數(shù)據(jù)轉(zhuǎn)換成和。若是超過瀏覽器自身限制的最大長度，會導(dǎo)致下載失敗。 前言 將數(shù)據(jù)報表導(dǎo)出，是web數(shù)據(jù)報告展示常用的附帶功能。通常這種功能都是用后端開發(fā)人員編寫的。今天我們主要講的是直接通過前端js將數(shù)據(jù)導(dǎo)出Excel的CSV格式的文件。 原理 首先在本地...

    hyuan 評論0 收藏0

  • 文件下載那點(diǎn)事

    摘要：不過這種方式有問題，目前查到的大部分過程都是會在服務(wù)器新建出一個文件，等下載完畢在做刪除，還沒有找到可以跨過這一步的方式。 showImg(https://segmentfault.com/img/remote/1460000018850368); Content-Disposition / Content-Type Content-Disposition http 頭部的 Conte...

    PascalXie 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<