js實現使用檔案流下載csv檔案

龍恩0707發表於2019-07-15
JS

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();

相關文章