Vue利用Blob下載原生二進制數(shù)組文件
更新時間:2019年09月25日 11:14:27 作者:yycdtu
這篇文章主要為大家詳細介紹了Vue利用Blob下載原生二進制數(shù)組文件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue利用Blob下載原生二進制數(shù)組文件的具體代碼,供大家參考,具體內(nèi)容如下
在服務(wù)端推送過來的二進制數(shù)組(JSON格式),在前端要處理成JS原生數(shù)組以后才能做成Blob,有兩個地方要注意(詳細注釋),代碼如下:
Vue.prototype.$downloadFile = (filename, data) => { if (!data) return; let arr8 = Uint8Array.from(data); //!??!注意1:應(yīng)根據(jù)數(shù)據(jù)的類型選擇適當(dāng)?shù)腏S原生數(shù)組類型進行轉(zhuǎn)換,也就是說服務(wù)端推送的byte型數(shù)組還是int型數(shù)組等。 //定義文件內(nèi)容,類型必須為Blob 否則createObjectURL會報錯 let blob = null; let type = 'application/octet-binary'; if (typeof (window.Blob) == "function") { blob = new Blob([arr8], {//?。?!注意2:數(shù)組兩邊必須加上[] type: type }); } else { let BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder; let bb = new BlobBuilder(); bb.append([arr8]); blob = bb.getBlob(type); } let URL = window.URL || window.webkitURL; let bloburl = URL.createObjectURL(blob); let anchor = document.createElement("a"); if ('download' in anchor) { anchor.style.visibility = "hidden"; anchor.href = bloburl; anchor.download = filename; document.body.appendChild(anchor); let evt = document.createEvent("MouseEvents"); evt.initEvent("click", true, true); anchor.dispatchEvent(evt); document.body.removeChild(anchor); } else if (navigator.msSaveBlob) { navigator.msSaveBlob(blob, filename); } else { location.href = bloburl; } //移除鏈接釋放資源 };
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue通過數(shù)據(jù)過濾實現(xiàn)表格合并
這篇文章主要為大家詳細介紹了vue通過數(shù)據(jù)過濾實現(xiàn)表格合并,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07Vue.js中輕松解決v-for執(zhí)行出錯的三個方案
v-for標簽可以用來遍歷數(shù)組,將數(shù)組的每一個值綁定到相應(yīng)的視圖元素中去,下面這篇文章主要給大家介紹了關(guān)于在Vue.js中輕松解決v-for執(zhí)行出錯的三個方案,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-06-06Vue Element UI 中 el-table 樹形數(shù)據(jù) 
這篇文章主要介紹了Vue Element UI 中 el-table 樹形數(shù)據(jù) tree-props 多層級使用避坑指南,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01Vue 2.0+Vue-router構(gòu)建一個簡單的單頁應(yīng)用(附源碼)
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構(gòu)建了一個簡單的單頁應(yīng)用,文中通過實例介紹的非常詳細,并在文末給出了源碼下載,需要的朋友可以下載學(xué)習(xí)參考,下面來一起看看吧。2017-03-03