本篇文章給大家?guī)?lái)了關(guān)于js+csv的相關(guān)知識(shí)，其中主要介紹了什么是Blob對(duì)象，怎么理解它以及如何使用文件流實(shí)現(xiàn)下載csv文件，感興趣的朋友，下面一起來(lái)看一下吧，希望對(duì)大家有幫助。

js使用文件流下載csv文件的實(shí)現(xiàn)方法

理解 Blob 對(duì)象

在 Blob 對(duì)象出現(xiàn)之前，在 javascript 中一直沒(méi)有比較好的方式處理二進(jìn)制文件，自從有了 Blob 了，我們就可以使用它操作二進(jìn)制數(shù)據(jù)了。

現(xiàn)在我們開(kāi)始來(lái)理解下 Bolb 對(duì)象及它的文件流下載應(yīng)用場(chǎng)景，話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧

• 創(chuàng)建 Blob 對(duì)象方式如下：

var blob = new Blob(dataArray, options);

dataArray: 它是一個(gè)數(shù)組，它包含了要添加到 Blob 對(duì)象中的數(shù)據(jù)。數(shù)組可以是二進(jìn)制對(duì)象或者字符串。

options 是可選的對(duì)象參數(shù)，用于設(shè)置數(shù)組中數(shù)據(jù)的 MIME 類(lèi)型。

• 創(chuàng)建一個(gè) DOMString 對(duì)象的 Blob 對(duì)象。如下代碼：

 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 對(duì)象

window 對(duì)象的 URL 對(duì)象是用來(lái)將 blob 或 file 讀取成一個(gè) url 的。

 window.URL.createObjectURL(file / blob);

比如我現(xiàn)在結(jié)合上面的 blob 對(duì)象來(lái)生成一個(gè) url 的簡(jiǎn)單 demo 實(shí)列如下所示：

    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);

如上代碼第一個(gè)打印 blob 變量值如下：

  Blob {size: 22, type: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"}

打印第二個(gè) url3 變量值信息如下：

blob:null/2c75a56e-0104-4572-bc19-391d3bf93d9d

• 理解 HTML5 中 a 標(biāo)簽的 download 屬性

HTMl5 中給 a 標(biāo)簽新增了一個(gè) download 屬性，只要我們?cè)O(shè)置該屬性值，那么點(diǎn)擊該鏈接時(shí)瀏覽器不會(huì)打開(kāi)新鏈接，而是會(huì)直接下載文件，并且文件名就是 download 的屬性值。

因此結(jié)合這個(gè)特點(diǎn)，我們就可以簡(jiǎn)單的實(shí)現(xiàn)文件流下載文件了，我們首先在原來(lái)的代碼基礎(chǔ)之上，再動(dòng)態(tài)創(chuàng)建一個(gè) a 鏈接，然后把該 a 標(biāo)簽的樣式設(shè)置 none, 該鏈接的 href 屬性 就是我們上面是有 window.URL.createObjectURL (blob); 生成的 url，然后我們把 a 鏈接的 download 屬性設(shè)置下，該屬性值就是我們的下載文件的文件名。最后觸發(fā)點(diǎn)擊功能即可下載了。如下代碼：

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

推薦學(xué)習(xí)：《JavaScript視頻教程》