vue 接收后端文件流 并下载
在vue框架中, 接收并下载文件流(blob对象) 可以通过将其转成blob对象,添加到a标签或者iframe标签中来模拟下载(或者pdf预览)1.首先设置responseType对象格式为 blob: responseType:‘blob’在项目reques.js文件中 添加请求头的相关配置 如header responseType 等config.headers['Authorizatio
·
在vue框架中, 接收并下载文件流(blob对象)
可以通过将其转成blob对象,添加到a标签或者iframe标签中来模拟下载(或者pdf预览)
1.首先设置responseType对象格式为 blob:
responseType:‘blob’
在项目reques.js文件中 添加请求头的相关配置 如header responseType 等
config.headers['Authorization'] = getToken()
if(config.responseType){
config.responseType = 'blob'
}
在api.js文件中 添加responseType:'blob'参数
//授权码下载
export function downloadcode(query) {
return request({
url: '/authCode/download',
method: 'get',
params: query,
responseType:'blob'
})
}
项目页面中:
//下载方法
handleDown(row) {
const data = {
id:row.id
}
downloadcode(data).then(res => {
console.log("下载的文件流",res)
const link=document.createElement('a');
try{
// let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'}); //如果后台返回的不是blob对象类型,先定义成blob对象格式
let blob = res.data //如果后台返回的直接是blob对象类型,直接获取数据
let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名,
link.style.display='none';
方法1: 创建--下载--销毁
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL;
link.href=url.createObjectURL(blob);
link.download = _fileName; //下载的文件名称
link.click();
window.URL.revokeObjectURL(url); // #URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.
方法2: 创建--下载--销毁
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL;
link.href=url.createObjectURL(blob);
link.setAttribute('download'_fileName.substring(_fileName.lastIndexOf('_')+1)));
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
url.revokeObjectURL(link.href);//销毁url对象
}catch (e) {
console.log('下载的文件出错',e)
}
})
},
返回的文件流 示例:
axios get 请求方式
axios.get(`/dev-api/authCode/download?id=`+row.id,
{ //请求头需要的一些配置
headers:{
"Authorization":getToken()
},
responseType: 'blob',//设置返回类型
}
).then((res)=>{
console.log('下载的文件',res)
const link=document.createElement('a');
try{
let blob = res.data
let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1];//文件名,中文无法解析的时候会显示 _(下划线),生产环境获取不到
link.style.display='none';
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL;
link.href=url.createObjectURL(blob);
link.download = _fileName;
link.click();
window.URL.revokeObjectURL(url);
}catch (e) {
console.log('下载的文件出错',e)
}
}).catch(()=>{
console.log('下载的文件出错')
})
参考:https://www.cnblogs.com/raymond-yan/p/10364120.html
https://blog.csdn.net/clmmei_123/article/details/108105046
更多推荐
所有评论(0)