vue axios调用后端接口,vue-axios详细介绍
这篇文章主要为大家详细介绍了某视频剪辑软件项目利用爱可信请求接口下载excel,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件项目利用爱可信请求接口下载超过的具体代码,供大家参考,具体内容如下
据我了解的前端的下载方式有三种,第一种是通过a标签来进行下载,第二种时候通过窗口。位置来下载,第三种是通过请求后台的接口来下载,今天就来记录一下这三种下载方式。
方法一:通过a标签
//href为文件的存储路径或者地址,下载为问文件名
a href=/images/logo。jpg rel= external no follow download= logo /
优点:简单方便。缺点:这种下载方式只支持火狐浏览器和铬不支持工业管理学(工业工程)和游猎,兼容性不够好。
方法二:通过窗口。位置
窗户。位置= http://127。0 .0 . 1:8080/API/下载? name=xxxtype=xxx
优点:简单方便。缺点:只能进行得到请求,当有代币校验的时候不方便。
方法三:通过请求后台接口
//download.js
从" axios "导入爱可信
导出功能下载(类型,名称){
axios({
方法: post ,
网址: http://127 .0 .0 .1:8080/API/下载,
//标题里面设置代币
标题:{
登录代码:“xxx”,
授权:“xxx”
},
数据:{
姓名:姓名,
类型:类型
},
//二进制流文件,一定要设置成斑点,默认是数据
响应类型:“blob”
}).然后(res={
const link=文档。createelement( a )
const blob=new Blob([res.data],{ type: application/vnd。ms-excel })
link.style.display=none
链接。href=URL。createobjecturl(blob)
link.setAttribute(download ,` ${name}。xlsx `)
document.body.appendChild(链接)
link.click()
document.body.removeChild(链接)
})
}
//download.java
@ request mapping(value=/API/download ,produces= application/octet-stream ,method=RequestMethod .帖子)
公共void下载模板(@ request body MapString,Object paramsMap,HttpServletResponse response) {
尝试{
if (paramsMap.get(type ).等于( XXX )参数映射。get( name ).等于( XXX ){
String[] str=新字符串[]{ 区县,所属省份,所属地市};
工作簿工作簿=导出excel。导出excel(行政区划表模版,str,null, yyyy-MM-DD );
下载(回复,练习册,‘城市字典’);
}
} catch(异常e) {
e。printstacktrace();
}
}
私有空的下载(HttpServletResponse响应,工作簿工作簿,字符串文件名){
尝试{
回应。设置内容类型(‘应用程序/八位字节流;charset=UTF-8;);
回应。添加标题(“内容-处置”,“附件文件名=文件名。xlsx’);
ByteArrayOutputStream by=new ByteArrayOutputStream();
输出流osOut=响应。获取输出流();
//将指定的字节写入此输出流
工作簿。write(osOut);
//刷新此输出流并强制将所有缓冲的输出字节被写出
奥索特。flush();
//关闭流
奥索特。close();
} catch (IOException e) {
LogUtils.getExceptionLogger().信息(下载模板错误:{} ,e . getmessage());
}
}
优点:可以在头球里面设置令牌,文件是爪哇岛代码中生成的,生成的文件比较灵活。缺点:实现起来比较复杂。
关于vue。j的学习教程,请大家点击专题vue。j组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。