一文詳解js如何用檔案流下載csv文件

這篇文章為大家帶來了關於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: &#39;text/xml&#39;});
 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: &#39;.csv, application/vnd.openxmlformats-        officedocument.spreadsheetml.sheet, application/vnd.ms-excel&#39;});
    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: &#39;.csv, application/vnd.openxmlformats-        officedocument.spreadsheetml.sheet, application/vnd.ms-excel&#39;});
        console.log(blob);
        const url3 = window.URL.createObjectURL(blob);
        console.log(url3);
        var filename = &#39;文件流下载&#39; + &#39;.csv&#39;;
        const link = document.createElement(&#39;a&#39;);
        link.style.display = &#39;none&#39;;
        link.href = url3;
        link.setAttribute(&#39;download&#39;, filename);
        document.body.appendChild(link);
        link.click();

推薦學習：《JavaScript影片教學》

以上是一文詳解js如何用檔案流下載csv文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！