這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)js使用文件流下載csv文件的實(shí)現(xiàn)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證，主要從事網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站開發(fā)、網(wǎng)頁(yè)設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)制作、做網(wǎng)站、建網(wǎng)站。創(chuàng)新互聯(lián)擁有實(shí)力堅(jiān)強(qiáng)的技術(shù)研發(fā)團(tuán)隊(duì)及素養(yǎng)的視覺設(shè)計(jì)專才。

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

var blob = new Blob(dataArray, options);

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

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

1. 創(chuàng)建一個(gè)DOMString對(duì)象的Blob對(duì)象。如下代碼：

var str = "
Hello World
"; 
var blob = new Blob([str], {type: 'text/xml'}); 
console.log(blob); // 輸出：Blob {size: 22, type: "text/xml"}

2. 理解URL.createObjectURL對(duì)象

window對(duì)象的URL對(duì)象是用來(lái)將blob或file讀取成一個(gè)url的。

window.URL.createObjectURL(file / blob);

比如我現(xiàn)在結(jié)合上面的blob對(duì)象來(lái)生成一個(gè)url的簡(jiǎn)單demo實(shí)列如下所示：

var str = "
Hello World
"; 
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);

如上代碼第一個(gè)打印blob變量值如下：

Blob {size: 22, type: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"}

打印第二個(gè)url3變量值信息如下：

blob:null/2c75a56e-0104-4572-bc19-391d3bf93d9d

3. 理解HTML5中a標(biāo)簽的download屬性

HTMl5中給a標(biāo)簽新增了一個(gè)download屬性，只要我們?cè)O(shè)置該屬性值，那么點(diǎn)擊該鏈接時(shí)瀏覽器不會(huì)打開新鏈接，而是會(huì)直接下載文件，并且文件名就是 download 的屬性值。

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

var str = "
Hello World
"; 
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文件的實(shí)現(xiàn)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱：js使用文件流下載csv文件的實(shí)現(xiàn)-創(chuàng)新互聯(lián)
分享路徑：http://weahome.cn/article/ipced.html