js使用文件流下載csv文件的實(shí)現(xiàn)方法
理解Blob對(duì)象
在Blob對(duì)象出現(xiàn)之前,在javascript中一直沒有比較好的方式處理二進(jìn)制文件,自從有了Blob了,我們就可以使用它操作二進(jìn)制數(shù)據(jù)了。
現(xiàn)在我們開始來(lái)理解下Bolb對(duì)象及它的文件流下載應(yīng)用場(chǎng)景,話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧
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ì)象是用來(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 = "<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)文件流下載文件了,我們首先在原來(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 = "<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é)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
- Javascript前端下載后臺(tái)傳來(lái)的文件流代碼實(shí)例
- JavaScript進(jìn)階之前端文件上傳和下載示例詳解
- nodejs實(shí)現(xiàn)生成文件并在前端下載
- javascript實(shí)現(xiàn)生成并下載txt文件方式
- Node.js實(shí)現(xiàn)下載文件的兩種實(shí)用方式
- javascript Blob對(duì)象實(shí)現(xiàn)文件下載
- JavaScript 中如何實(shí)現(xiàn)大文件并行下載
- 前端 javascript 實(shí)現(xiàn)文件下載的示例
- JavaScript實(shí)現(xiàn)多文件下載方法解析
- javascript使用Blob對(duì)象實(shí)現(xiàn)的下載文件操作示例
- 原生js實(shí)現(xiàn)文件上傳、下載、封裝等實(shí)例方法
- JavaScript實(shí)現(xiàn)文件下載并重命名代碼實(shí)例
- js實(shí)現(xiàn)文件流式下載文件方法詳解及完整代碼
相關(guān)文章
原生js實(shí)現(xiàn)表格翻頁(yè)和跳轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格翻頁(yè)和跳轉(zhuǎn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09封裝一個(gè)vue中也可使用的uniapp的全局彈窗組件(任何頁(yè)面都可以彈出)
在寫uniapp小程序的時(shí)候,彈窗提醒經(jīng)常會(huì)用到,雖然彈窗的組件很多,但是通常別人封裝好的彈窗組件自定義度不高,很難匹配自己的ui需求,這篇文章主要給大家介紹了封裝一個(gè)vue中也可使用的uniapp的全局彈窗組件的相關(guān)資料,這個(gè)組件在任何頁(yè)面都可以彈出,需要的朋友可以參考下2023-02-02擁有一個(gè)屬于自己的javascript表單驗(yàn)證插件
這篇文章主要幫助大家擁有一個(gè)屬于自己的javascript表單驗(yàn)證插件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03javascript中的document.open()方法使用介紹
document.open()方法打開一個(gè)新的文檔并用document.write()方法編寫文檔的內(nèi)容,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-10-10js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門代碼分享(2款)
這篇文章主要為大家詳細(xì)介紹了兩種js+css實(shí)現(xiàn)的圓角邊框TAB選項(xiàng)卡滑動(dòng)門效果,很實(shí)用的代碼,推薦給大家,有需要的小伙伴可以參考下2015-08-08Uni-App用uView組件庫(kù)中u-picker實(shí)現(xiàn)地區(qū)的省-市-區(qū)三級(jí)聯(lián)動(dòng)、確認(rèn)及回顯
最近項(xiàng)目要使用uni-app遇到省市縣三級(jí)聯(lián)動(dòng)的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Uni-App用uView組件庫(kù)中u-picker實(shí)現(xiàn)地區(qū)的省-市-區(qū)三級(jí)聯(lián)動(dòng)、確認(rèn)及回顯的相關(guān)資料,需要的朋友可以參考下2023-12-12微信小程序 配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序 配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-09-09