axios---根据文件路径转换成Blob类型进行下载
在做下载功能过程中,常常遇到接口跨域的行为,因为权限不能够直接访问而无法实现下载的情况下,可以将文件路径转成文件流下载下来。
下载方法
// 下载 getDownLoadFile(fileUrl,fileRow){ return new Promise((resolve, reject) => { let obj = { method: 'get', url:fileUrl, responseType: 'blob' } this.$axios(obj) .then(data => { resolve(data) }) .catch(error => { reject(error.toString()) }) }).then(data=>{ let fileName = fileUrl.slice(fileUrl.length - 4) download(data.data,fileRow.fileName + fileName); }) },
按钮触发
<el-button @click.stop="getDownLoadFile(fileUrl,row)" v-preventReClick style="padding:0 10px" type="text"> 下载 </el-button>
文件流处理方法
/** * 文件流转换 * @param {} data */ export function download(data, titName, type) { if (!data) { return } const blob = new Blob([data], { type: type ? type : "application/vnd.ms-excel" }) const fileName = titName if ('download' in document.createElement('a')) { // 非IE下载 const elink = document.createElement('a') elink.download = fileName elink.style.display = 'none' elink.href = URL.createObjectURL(blob) document.body.appendChild(elink) elink.click() URL.revokeObjectURL(elink.href) // 释放URL 对象 document.body.removeChild(elink) } else { // IE10+下载 navigator.msSaveBlob(blob, fileName) navigator.msSaveBlob(blob) } }
标签:
axios
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本