站長資訊網(wǎng)
本篇文章給大家?guī)砹岁P于js+csv的相關知識，其中主要介紹了什么是Blob對象，怎么理解它以及如何使用文件流實現(xiàn)下載csv文件，感興趣的朋友，下面一起來看一下吧，希望對大家有幫助。
js使用文件流下載csv文件的實現(xiàn)方法
理解 Blob 對象
在 Blob 對象出現(xiàn)之前，在 javascript 中一直沒有比較好的方式處理二進制文件，自從有了 Blob 了，我們就可以使用它操作二進制數(shù)據(jù)了。
現(xiàn)在我們開始來理解下 Bolb 對象及它的文件流下載應用場景，話不多說了，來一起看看詳細的介紹吧
-
創(chuàng)建 Blob 對象方式如下：
var blob = new Blob(dataArray, options);
dataArray: 它是一個數(shù)組，它包含了要添加到 Blob 對象中的數(shù)據(jù)。數(shù)組可以是二進制對象或者字符串。
options 是可選的對象參數(shù)，用于設置數(shù)組中數(shù)據(jù)的 MIME 類型。
-
創(chuàng)建一個 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);
比如我現(xiàn)在結合上面的 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 的屬性值。
因此結合這個特點，我們就可以簡單的實現(xiàn)文件流下載文件了，我們首先在原來的代碼基礎之上，再動態(tài)創(chuàng)建一個 a 鏈接，然后把該 a 標簽的樣式設置 none, 該鏈接的 href 屬性 就是我們上面是有 window.URL.createObjectURL (blob); 生成的 url，然后我們把 a 鏈接的 download 屬性設置下，該屬性值就是我們的下載文件的文件名。最后觸發(fā)點擊功能即可下載了。如下代碼：
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();
推薦學習：《JavaScript視頻教程》
