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