vue 导出文件,携带请求头token操作
前言
本文并不能直接复制到本地看效果,仅提供代码参考
1.使用axios的方式携带请求头token
2.设置响应的数据类型
responseType:"blob"
3.请求成功,返回二进制文件的数据回来
4.请求失败,返回json
5.示例代码
导出
补充知识:Vue项目导出功能、带token导出Excel
在vue后台管理项目中,目前我常用的就两种导出方式
一种是不需要携带token的,直接调用后台的接口,携带需要传递参数就行,具体实现代码如下:
在main.js封装指令
letbaseDownloadUrl='http://xxxxxxx:8080'//域名 constPATH={ userList:'vue/export/userList'//后台接口地址 } //封装v-out指令 Vue.directive('out',{ inserted:(el,binding)=>{ el.addEventListener('click',()=>{ console.log(binding.value)//自定义指令传请求参数 leta=document.createElement('a')//创建a标签 //处理请求参数,在url后面拼接 letparams='?' for(letkeyinbinding.value.params){ params=params+key+'='+binding.value.params[key]+'&' } console.log(params) a.style.display='none' //测试导出文件 //link.href= 'https://dl.google.com/tag/s/appguid%3D%7B8A69D345-D564-463C-AFF1-A69D9E530F96%7D%26iid%3D%7BA381F257-9F2F-3652-F0EC-56B9B2C86F92%7D%26lang%3Dzh-CN%26browser%3D4%26usagestats%3D1%26appname%3DGoogle%2520Chrome%26needsadmin%3Dprefers%26ap%3Dx64-stable-statsdef_1%26installdataindex%3Dempty/update2/installers/ChromeSetup.exe' //a标签添加导出地址 a.href= baseDownloadUrl+ PATH[binding.value.pathName]+ putCode+ (params||'') a.setAttribute('download','文件名')//a标签添加download属性,导出文件名需要就添加,不需要则为空 document.body.appendChild(a) a.click()//触发a标签点击事件 }) } })
在需要导出的页面应用:
导出
另一种导出方式则是带token导出,token封装在请求头里,在请求头里发送给后端
调用导出接口时,需要加参数:responseType:‘blob'(必须要有的)
封装导出请求文件exportOut.js
exportfunctionexpotOut(searchList,pathName,xlsName){ //获取时间,这一步是在下载时文件名带下载日期,例如:用户信息2020-04-27.xls,如无需要可以去掉 letd=newDate() letmonth=(d.getMonth()+1) letday=d.getDate() lettime=d.getFullYear()+'-'+(String(month).length>1?month:'0'+month)+'-'+(String(day).length>1?day:'0'+day) //地址 letbaseURL='http://xxxxxxx:8080'//域名 constPATH={ userList:'vue/export/userList',//后台接口地址 } //参数 letparams='?' for(letkeyinsearchList){ params=params+key+'='+searchList[key]+'&' } functioncreateObjectURL(object){return(window.URL)?window.URL.createObjectURL(object):window.webkitURL.createObjectURL(object)} varxhr=newXMLHttpRequest() varformData=newFormData() xhr.open('get',baseURL+PATH[pathName]+params)//url填写后台的接口地址,如果是post,在formDataappend参数(参考原文地址) xhr.setRequestHeader('token',localStorage.getItem('token')) xhr.responseType='blob' xhr.onload=function(e){ if(this.status===200){ varblob=this.response //xls文件名称 varfilename=`${xlsName}${time}.xls` if(window.navigator.msSaveOrOpenBlob){ navigator.msSaveBlob(blob,filename) }else{ vara=document.createElement('a') varurl=createObjectURL(blob) a.href=url a.download=filename document.body.appendChild(a) a.click() window.URL.revokeObjectURL(url) } } } xhr.send(formData) }
vue文件中使用导出功能:
引入exportOut.js
import{expotOut}from'../http/exportOut'
使用
methods:{ //导出 outFile(){ expotOut(this.searchList,//导出请求参数 'userList',//后台地址PATH对象的key '用户信息'//导出文件名字 ) }, }
以上这篇vue导出文件,携带请求头token操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。