欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js使用文件流下載csv文件的實現(xiàn)方法

 更新時間:2019年07月15日 14:57:47   作者:龍恩0707  
這篇文章主要給大家介紹了關(guān)于js使用文件流下載csv文件的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用js具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧

理解Blob對象

在Blob對象出現(xiàn)之前,在javascript中一直沒有比較好的方式處理二進制文件,自從有了Blob了,我們就可以使用它操作二進制數(shù)據(jù)了。

現(xiàn)在我們開始來理解下Bolb對象及它的文件流下載應用場景,話不多說了,來一起看看詳細的介紹吧

1. 創(chuàng)建Blob對象方式如下:

var blob = new Blob(dataArray, options);

dataArray: 它是一個數(shù)組,它包含了要添加到Blob對象中的數(shù)據(jù)。數(shù)組可以是二進制對象或者字符串。

options是可選的對象參數(shù),用于設置數(shù)組中數(shù)據(jù)的MIME類型。

1. 創(chuàng)建一個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);

比如我現(xiàn)在結(jié)合上面的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 的屬性值。

因此結(jié)合這個特點,我們就可以簡單的實現(xiàn)文件流下載文件了,我們首先在原來的代碼基礎之上,再動態(tài)創(chuàng)建一個a鏈接,然后把該a標簽的樣式設置none, 該鏈接的 href屬性 就是我們上面是有 window.URL.createObjectURL(blob); 生成的url,然后我們把 a鏈接的download屬性設置下,該屬性值就是我們的下載文件的文件名。最后觸發(fā)點擊功能即可下載了。如下代碼:

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。

相關(guān)文章

最新評論