您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue中怎么用Blob下載原生二進制數(shù)組文件的相關(guān)知識點,內(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ù)的類型選擇適當?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; } //移除鏈接釋放資源 };
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗。
以上就是“Vue中怎么用Blob下載原生二進制數(shù)組文件”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。