Vue 下载文件需要token设置
平时下载文件访问后台给的下载链接点击自动下载即可,因文件需要验证身份信息,所以需要在Request headers中塞入token作为身份验证既然链接直接打开不行,那就只能通过ajax访问的时候设置Request headersajax访问成功以后,返回的并不是我们想要直接下载的结果,返回的直接是文本内容,并且没有触发下载,例如既然文件已经能访问到了,那就手动下载吧,/*1 ajax文件格式是.t
·
平时下载文件访问后台给的下载链接点击自动下载即可,因文件需要验证身份信息,所以需要在Request headers中塞入token作为身份验证
既然链接直接打开不行,那就只能通过ajax访问的时候设置Request headers
请求数据格式设置成文件流,请求中添加 responseType: 'blob'
export function filedown() {
return request({
url:'.............',
method:'get',
responseType: 'blob',
headers:{
'Content-Type':'application/json',
}
})
}
ajax访问成功以后,返回的并不是我们想要直接下载的结果,返回的直接是文本内容,并且没有触发下载,例如
既然文件已经能访问到了,那就手动下载吧,
/*
1 ajax文件格式是.text,下载用的是Blob文件流,所以手动修改请求的responseType的返回格式类型
*/
//JS 获取到Blob格式文件后下载方法,Blob格式在下面
const link = document.createElement('a'); // 创建元素
let blob = new Blob([res.data]);
link.style.display = 'none';
link.href = URL.createObjectURL(blob); // 创建下载的链接
link.setAttribute('download', fileName+'.'+type); // 给下载后的文件命名 fileName文件名 type文件格式
document.body.appendChild(link);
link.click(); // 点击下载
document.body.removeChild(link); // 下载完成移除元素
window.URL.revokeObjectURL(link.href); // 释放掉blob对象
基本上这样就结束了,但是!如果他没有权限呢?这个时候你文件返回的格式是Blob文件流,是看不到报错信息的,并且会执行下载,但是空文件甚至报错
这个时候就要把Blob文件流转换成字符串,再去判断需不需要执行文件下载或者提示登录信息之类的,整合以后如下
/*
文件请求返回数据格式为Blob --- responseType: 'blob',
JS ---获取到blob格式文件后的操作
fileName --文件名
type --下载文件格式
*/
downFile(fileId,fileName,type){
filedown(fileId).then(res =>{
var reader = new FileReader();
let that = this
reader.onloadend = function(event){
//event 就是你要的返回内容
//因为返回的报错格式是字符串,手动转换成对象,转换成功表示请求失败
//转换失败就意味着你拿到的result是文件流,那么直接手动下载就好
try{
let data = JSON.parse(event.target.result)
that.$message.error("请点击右上角登录后重新下载");
}catch(err){
const link = document.createElement('a'); // 创建a标签
let blob = new Blob([res.data]);
link.style.display = 'none';
link.href = URL.createObjectURL(blob); // 创建下载的链接
link.setAttribute('download', fileName+'.'+type); // 给下载后的文件命名
document.body.appendChild(link);
link.click(); // 点击下载
document.body.removeChild(link); // 完成移除元素
window.URL.revokeObjectURL(link.href); // 释放blob对象
}
};
reader.readAsText(res.data);
})
})
更多推荐
已为社区贡献13条内容
所有评论(0)