js實現使用文件流下載csv文件

1. 理解Blob對象

在Blob對象出現以前，在javascript中一直沒有比較好的方式處理二進制文件，自從有了Blob了，咱們就能夠使用它操做二進制數據了。如今咱們開始來理解下Bolb對象及它的文件流下載應用場景。

1. 建立Blob對象方式以下：

var blob = new Blob(dataArray, options);

dataArray: 它是一個數組，它包含了要添加到Blob對象中的數據。數組能夠是二進制對象或者字符串。

options是可選的對象參數，用於設置數組中數據的MIME類型。

1. 建立一個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"}

2. 理解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

3. 理解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();