Vue利用Blob下載原生二進制數組文件
更新時間:2019年09月25日 11:14:27 作者:yycdtu
這篇文章主要為大家詳細介紹了Vue利用Blob下載原生二進制數組文件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue利用Blob下載原生二進制數組文件的具體代碼,供大家參考,具體內容如下
在服務端推送過來的二進制數組(JSON格式),在前端要處理成JS原生數組以后才能做成Blob,有兩個地方要注意(詳細注釋),代碼如下:
Vue.prototype.$downloadFile = (filename, data) => { if (!data) return; let arr8 = Uint8Array.from(data); //?。?!注意1:應根據數據的類型選擇適當的JS原生數組類型進行轉換,也就是說服務端推送的byte型數組還是int型數組等。 //定義文件內容,類型必須為Blob 否則createObjectURL會報錯 let blob = null; let type = 'application/octet-binary'; if (typeof (window.Blob) == "function") { blob = new Blob([arr8], {//?。。∽⒁?:數組兩邊必須加上[] 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; } //移除鏈接釋放資源 };
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
Vue.js中輕松解決v-for執(zhí)行出錯的三個方案
v-for標簽可以用來遍歷數組,將數組的每一個值綁定到相應的視圖元素中去,下面這篇文章主要給大家介紹了關于在Vue.js中輕松解決v-for執(zhí)行出錯的三個方案,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-06-06Vue Element UI 中 el-table 樹形數據 
這篇文章主要介紹了Vue Element UI 中 el-table 樹形數據 tree-props 多層級使用避坑指南,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01Vue 2.0+Vue-router構建一個簡單的單頁應用(附源碼)
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構建了一個簡單的單頁應用,文中通過實例介紹的非常詳細,并在文末給出了源碼下載,需要的朋友可以下載學習參考,下面來一起看看吧。2017-03-03