Vue利用Blob下載原生二進(jìn)制數(shù)組文件
更新時(shí)間：2019年09月25日 11:14:27 作者：yycdtu
這篇文章主要為大家詳細(xì)介紹了Vue利用Blob下載原生二進(jìn)制數(shù)組文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue利用Blob下載原生二進(jìn)制數(shù)組文件的具體代碼，供大家參考，具體內(nèi)容如下
在服務(wù)端推送過(guò)來(lái)的二進(jìn)制數(shù)組(JSON格式），在前端要處理成JS原生數(shù)組以后才能做成Blob，有兩個(gè)地方要注意（詳細(xì)注釋），代碼如下：
Vue.prototype.$downloadFile = (filename, data) => {
if (!data) return;
let arr8 = Uint8Array.from(data); //?。?！注意1：應(yīng)根據(jù)數(shù)據(jù)的類型選擇適當(dāng)?shù)腏S原生數(shù)組類型進(jìn)行轉(zhuǎn)換，也就是說(shuō)服務(wù)端推送的byte型數(shù)組還是int型數(shù)組等。
//定義文件內(nèi)容，類型必須為Blob 否則createObjectURL會(huì)報(bào)錯(cuò)
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;
} //移除鏈接釋放資源
};
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue項(xiàng)目netWork地址無(wú)法訪問(wèn)的問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目netWork地址無(wú)法訪問(wèn)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要為大家介紹了Vue之表單事件的數(shù)據(jù)綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助,希望能夠給你帶來(lái)幫助2021-11-11
vue通過(guò)數(shù)據(jù)過(guò)濾實(shí)現(xiàn)表格合并
這篇文章主要為大家詳細(xì)介紹了vue通過(guò)數(shù)據(jù)過(guò)濾實(shí)現(xiàn)表格合并，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案
v-for標(biāo)簽可以用來(lái)遍歷數(shù)組，將數(shù)組的每一個(gè)值綁定到相應(yīng)的視圖元素中去，下面這篇文章主要給大家介紹了關(guān)于在Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
這篇文章主要為大家詳細(xì)介紹了vue彈窗組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue Element UI 中 el-table 樹(shù)形數(shù)據(jù)
這篇文章主要介紹了Vue Element UI 中 el-table 樹(shù)形數(shù)據(jù) tree-props 多層級(jí)使用避坑指南,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
Vue 2.0+Vue-router構(gòu)建一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用（附源碼）
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構(gòu)建了一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用，文中通過(guò)實(shí)例介紹的非常詳細(xì)，并在文末給出了源碼下載，需要的朋友可以下載學(xué)習(xí)參考，下面來(lái)一起看看吧。2017-03-03
這篇文章主要介紹了vscode下的vue文件格式化問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項(xiàng)目中使用axios上傳圖片等文件操作，需要的朋友參考下吧2017-11-11
vue.js實(shí)現(xiàn)回到頂部動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)回到頂部動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07