Vue 下载文件需要token设置

平时下载文件访问后台给的下载链接点击自动下载即可，因文件需要验证身份信息，所以需要在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 = thisreader.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);})
})

Vue 下载文件需要token设置相关推荐

vue 下载文件流和捕获后端返回的状态码和错误信息的方法
文件流下载需要注意的是 responseType: 'blob' ,否则下载的文件不能正确打开.但是当数据库返回400时,捕获不到error的错误信息,因为responseType设置了固定的返回格式 ...
vue下载文件并重命名
vue的项目,需要做一个文件上传下载的功能.上传是OK的,然鹅因为上传到minio的时候,使用了随机数命名,导致文件名称就变成了一大串字符.被客户驳回来了.那好吧,就加一个重命名功能好了. 不过这个项 ...
vue下载文件自定义路径_npm 自定义配置文件下载路径
Nodejs 内置的npm默认会把模块安装在c盘的用户AppData目录下,以下步骤是为了让大家学习如何更改npm 安装目录的首先你可以使用cmd命令进行查看当前电脑的npm 安装路径. 输入 np ...
vue下载文件流完整前后端代码
使用Vue时,我们前端如何处理后端返回的文件流首先后端返回流,这里我把流的动作拿出来了,我很多地方要用 /*** 下载单个文件** @param docId*/@GetMapping("/ ...
java接收前台tex格式t数据_java 下载文件时，设置response.setContentType 根据文件类型...
Response.setContentType(MIME)的作用是时客户端的浏览器区分不同种类的数据,并根据不同的MIME调用浏览器内不同的程序嵌入模块来处理相应的数据. MIME的作用: 由于MIM ...
Vue 下载文件txt、json格式等
一.不使用依赖 this.code是要导出文件里的内容,(新建一个a标签来下载) //下载txt文件const element = document.createElement('a')element ...
vue下载文件(zip格式)，并解决中文乱码
examineClick(index, tableData, id) { // 触发事件axios({method: 'post',url: `***`, // 接口responseType: 'bl ...
前端：下载文件(多种方法)
一.简介前端经常会有下载文件的需求,这里总结了几种常用的方法,方便日后查看. 二.a标签下载 <a href="https://abc.png" download=&quo ...
Python+Selenium练习篇13-设置浏览器下载文件默认地址
本文介绍如何设置浏览器下载文件默认地址设置Selenium自动化下载的浏览器默认地址本人使用浏览器Chrome,python3.7 代码如下: # coding=utf-8 from seleni ...
正确处理下载文件时HTTP头的编码问题（Content-Disposition），safari下载文件中文名乱码问题
目前支持ie9-11,firefox63.0,chrome69.0,qq10.2.1的版本,safari的最新版本(特别是解决mac下的safari中,下载文件的中文文件名问题). 下载文件时, 设置 ...

Vue 下载文件需要token设置

Vue 下载文件需要token设置相关推荐

最新文章

热门文章