您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)js使用文件流下載csv文件的實(shí)現(xiàn),文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
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 = "<div>Hello World</div>"; 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ì)象是用來將blob或file讀取成一個(gè)url的。
window.URL.createObjectURL(file / blob);
比如我現(xiàn)在結(jié)合上面的blob對(duì)象來生成一個(gè)url的簡(jiǎn)單demo實(shí)列如下所示:
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);
如上代碼第一個(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)文件流下載文件了,我們首先在原來的代碼基礎(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 = "<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文件的實(shí)現(xiàn)了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。