vue 下载后端返回的文件流
2020-07-29 22:32
169 查看
请求的时候请求头加:responseType: “blob”,
因为项目中多个地方用到,写的公共方法,传参的方式
conversionBlob(res, name) { let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8" }); let contentDisposition = res.headers["content-disposition"]; let filename = new RegExp("filename=([^;]+\\.[^\\.;]+);*"); let result = filename.exec(contentDisposition); if (result) { let filename; if (name) { let reg = /^(.*)(\.xls|\.xlsx)$/ filename = `${name.replace(reg,"$1")}失败记录.xls`; } else { filename = result[1]; } let downloadElement = document.createElement("a"); let href = window.URL.createObjectURL(blob); //创建下载的链接 downloadElement.style.display = "none"; downloadElement.href = href; downloadElement.download = filename; //下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); //点击下载 document.body.removeChild(downloadElement); //下载完成移除元素 window.URL.revokeObjectURL(href); //释放掉blob对象 } else { var reader = new FileReader(); reader.onload = e => { var message = JSON.parse(e.target.result).message; this.$message.error(message); }; reader.readAsText(blob); } }
相关文章推荐
- vue项目-pdf预览和下载,后台返回文件流形式
- vue 两种文档下载方法的实现(后台传递文件流,后台返回文件下载地址)
- vue中使用axios处理post方法导出excel表格(后端返回文件流)
- vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
- Vue中axios实现文件流下载
- vue请求后端返回的数据res[object object]
- android客户端从服务器端下载文件,服务端返回文件流(文件不在项目里)
- 前端接受后端文件流并下载到本地的方法
- vue下载后台文件流为excl文件
- iOS 下载图片 -当后台返回的数据是文件流而不是图片url
- vue-导出后端返回数据到excel中
- 前后端分离,导出数据为文件或下载文件,前端如何处理后端返回的数据
- vue后端返回路由表来进行权限管理,加载指定路由结构,不包含则不加载
- vue+axios 实现Excel下载,并解析文件流
- vue中后端返回一个对象是前端需要使用element的table渲染
- vue项目ant框架+pdf.js填坑总结,如何让后端返回的pdf数据流在浏览器预览
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- VUE渲染后端返回含有script标签的html字符串
- Vue Element UI 实现文件excel的上传及下载2种方式(文件流及a标签)
- 前端处理后端文件流并下载的方法