在vue中怎么使用axios实现发布方式获取二进制流下载文件 - 行业资讯

　　介绍

这篇文章主要介绍在vue中怎么使用axios实现发布方式获取二进制流下载文件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

vue是什么

vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。

<强>需求

点击导出下载表格对应的excel文件

在vue项目中,使用的axios,后台java提供的帖子接口api

<强>实现

第一步,在axios请求中加入参数,表示接收的数据为二进制文件流

<代码> responseType: & # 39;团# 39;

第二步,在拿到数据流之后,把流转为指定文件格式并创建一个标签,模拟点击下载,实现文件下载功能

let blob =res.data 　　let reader =, new FileReader () 　　reader.readAsDataURL (blob) 　　reader.onload =, (e),=祝辞,{ 　　,let a =, document.createElement(& # 39;一个# 39;) 　　a.download =,文件名=,a.href e.target.result 　　,document.body.appendChild (a) 　　,a.click () 　　,document.body.removeChild (a) 　　}

<>强问题

使用axios会出现无法拿到java后端给出的附加项中的文件名

注意的是,浏览器中可以看到标题中有信息,但是无法通过axios的res.header获取到

在vue中怎么使用axios实现发布方式获取二进制流下载文件”>, 这种情况需要后端设置标题 Access-Control-Expose-Headers:附加 有可能后端加了之后还是获取不到,那么让后端单独加一个文件名字段即可 <pre类= response.setContentType(“多部分/form-data"); 　　response.setCharacterEncoding (“utf-8"); 　　response.setHeader (“Content-disposition",,“附件;文件名=?+,UUID.randomUUID () .toString (), +,“.xlsx"); 　　response.setHeader (“FileName", UUID.randomUUID () .toString (), +,“.xlsx"); 　　response.setHeader (“Access-Control-Expose-Headers",,“FileName")

<强>总结

完整的axios代码

axios.post ({ 　　,url:“url”, 　　,方法:“文章”, 　　,responseType: & # 39;团# 39; 　　})(res =祝辞,{ 　　,let blob =res.data 　　,let reader =, new FileReader () 　　,reader.readAsDataURL (blob) 　　,reader.onload =, (e),=祝辞,{ 　　let 才能;a =, document.createElement(& # 39;一个# 39;) 　　a.download =,才能“fileName.xlsx” 　　a.href 才能=e.target.result 　　document.body.appendChild才能(a) 　　a.click才能() 　　document.body.removeChild才能(a) 　　,} 　　})

<>强ps: vue-axios的使用方法(简单易懂)

<强> 1。vue-axios插件的安装

使用npm:

<代码> cnpm美元安装axios

<强> 2。在main.js中添加(添加到原型链上)

import axios 得到& # 39;axios& # 39;; 　　时间=Vue.prototype.axios axios;

完活,然后就可以随便在任何组件开始用了,耶! ^ - ^ !

例子:

this.axios.post (& # 39; http://ai.yiche.com/web/ability/nlu/standardTokenizer& # 39;,, { 　　,,,,“text":,“动效如果有跟评审结论有出入的地方或者不清楚的地方,随时沟通哈~“ 　　,,,})(函数(res), { 　　,,,,console.log (res.data); 　　,,,}).catch(函数(err), { 　　,,,,if (err.response), { 　　,,,,,console.log (err.response) 　　,,,,} 　　,,,});

以上是“在vue中怎么使用axios实现发布方式获取二进制流下载文件”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!