程序地带

Vue 下载文件需要token设置


平时下载文件访问后台给的下载链接点击自动下载即可,因文件需要验证身份信息,所以需要在Request headers中塞入token作为身份验证


既然链接直接打开不行,那就只能通过ajax访问的时候设置Request headers


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);
})
})

 


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wk15038187622/article/details/111246118

随机推荐

东华理工大学arm试卷_ARM体系结构试题

题号一二三四五六七八九总分分数1040101030得分评卷人一、名词解释(5×2分=10分)1.系统调用运行在使用者空间的程序向系统内核请求需要更高权限运行的服务2.哈弗结构数据指令存储和程序...

weixin_39637370 阅读(688)

python 循环十次_Python第十次作业

一、基础概念1)因果关系不确定性2)随机程序如果一个程序运行时使用相同输入就会产生相同输出,那么这个程序就是确定性的。在随机过程中,如果一个事件的结果不会影响另一个事件的结...

weixin_39581571 阅读(415)

蓝牙BQB认证的过程与方式(SIG)

蓝牙BQB认证的过程与方式(SIG)刚刚做完了车机产品的蓝牙认证,遇到了一些问题,特此整理记录下,分享给大家。1项目背景项目立项初...

Simon_ce 阅读(934)

腾讯云CentOS 7.6安装Mysql

腾讯云CentOS 7.6安装Mysql

一、卸载MariaDB数据库1、查询系统默认安装的MariaDB数据库rpm-qa|grepmariadbmariadb-libs-5.5.60-1.el7_5.x86_642、卸载系统安装的Mari...

你不姓杨 阅读(786)

JS阻止事件冒泡

阻止事件冒泡functionstopBubble(e){//如果提供了事件对象,则这是一个非IE浏览器if(e&&e.stopPropagation){//因此它支持W3C的stopPr...

Chrolly 阅读(769)