js中怎么用文件流下載csv文件

這篇文章主要講解了“js中怎么用文件流下載csv文件”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“js中怎么用文件流下載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();

感謝各位的閱讀，以上就是“js中怎么用文件流下載csv文件”的內容了，經過本文的學習后，相信大家對js中怎么用文件流下載csv文件這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！