vue后臺返回格式為二進制流進行文件的下載方式
更新時間:2022年06月02日 11:08:21 作者:阿然然然
這篇文章主要介紹了vue后臺返回格式為二進制流進行文件的下載方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
后臺返回格式為二進制流進行文件的下載
結(jié)合項目中
封裝get請求攜帶token,進行接收二進制流
export function getHeader() { ? ? const token = getToken(); ? ? if (token) { ? ? ? ? return { ? ? ? ? ? ? headers: { ? ? ? ? ? ? ? ? "Authorization": "Bearer " + token, ? ? ? ? ? ? } ? ? ? ? } ? ? } ? ? return { ? ? ? ? headers: {} ? ? } } ? export function getHeader() { ? ? const token = getToken(); ? ? if (token) { ? ? ? ? return { ? ? ? ? ? ? headers: { ? ? ? ? ? ? ? ? "Authorization": "Bearer " + token, ? ? ? ? ? ? } ? ? ? ? } ? ? } ? ? return { ? ? ? ? headers: {} ? ? } }
具體文件使用
TaskManageServer.js文件:
export const dataExport2 ?= (vueObject, dataIdList) => ?getDataRaw(vueObject,dataExport1(dataIdList)) ? export const dataExport1 = (dataIdList)=> { ? ? var tmp =""; ? ? for (let i = 0; i <dataIdList.length; i++) { ? ? ? ? tmp+= dataIdList[i]+"," ? ? } ? ? tmp = tmp.substr(0,tmp.length-1) ? ? var url = getUrl('image/export/' + tmp); ? ? return url; }
對應html文件具體使用:
?import { ? ? ? ? dataExport1, ? ? ? ? dataExport2 ? ? } from './TaskManageServer' const response = await dataExport2(this, this.dataIdList); let blob = new Blob([response.data], { ? ? //下載的文件類型; ? ? type: 'application/zip'? }) // let fileName = Date.parse(new Date()) + '.zip'(修改下載的文件名) if (window.navigator.msSaveOrOpenBlob) { ? ? // navigator.msSaveBlob(blob, fileName) ? ? navigator.msSaveBlob(blob) } else { ? ? var link = document.createElement('a') ? ? link.href = window.URL.createObjectURL(blob) ? ? // link.download = fileName ? ? link.click() ? ? window.URL.revokeObjectURL(link.href) //釋放內(nèi)存 }
即可實現(xiàn)下載二進制流文件。
vue下載保存二進制文件
方法封裝:util.js
/** ?* 把二進制文件保存到本地 ?*/ export function exportFile(file, name) { ? let url = window.URL.createObjectURL(new Blob([file])); ? let link = document.createElement("a"); ? link.style.display = "none"; ? link.href = url; ? link.setAttribute("download", name); ? document.body.appendChild(link); ? link.click(); ? ? document.body.removeChild(link); // 下載完成移除元素 ? window.URL.revokeObjectURL(url); // 釋放掉blob對象 }
請求接口
在請求頭加responseType: "arraybuffer"
export function demoApi(data) { ? return http({ ? ? url: "/path/export", ? ? method: "post", ? ? responseType: "arraybuffer", ? ? data, ? }); }
方法調(diào)用
demoApi(data).then(res=>{ ? ? if(res.staus==200){ ? ? ? ? let fileName = ""; ? ? ? ? ? let contentDisposition = res.headers["content-disposition"]; ? ? ? ? ? if (contentDisposition) { ? ? ? ? ? ? fileName = window.decodeURI( ? ? ? ? ? ? ? res.headers["content-disposition"].split("=")[1], ? ? ? ? ? ? ? "UTF-8" ? ? ? ? ? ? );//取文件名 ? ? ? ? ? } ? ? ? ? ? exportFile(res.data, fileName); ? ? } })
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07基于Vue組件化的日期聯(lián)動選擇器功能的實現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動選擇器的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11Vue重要修飾符.sync對比v-model的區(qū)別及使用詳解
這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對比及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07警告[vue-router]?Duplicate?named?routes?definition簡單解決方法
這篇文章主要關于介紹了警告[vue-router]?Duplicate?named?routes?definition的解決方法,這個錯誤提示是因為在Vue Router中定義了重復的路由名稱,需要的朋友可以參考下2023-12-12