怎么在vue.js中利用axios实现一个下载功能 - 行业资讯 - 肥雀云

　　介绍

怎么在vue.js中利用axios实现一个下载功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强> Ajax无法下载文件的原因

浏览器的GET(框架,a)和POST(形式)请求具有如下特点:

反应会交由浏览器处理

响应内容可以为二进制文件,字符串等

<强> Ajax请求具有如下特点:

反应会交由Javascript处理

响应内容仅可以为字符串

因此,Ajax本身无法触发浏览器的下载功能。

<强> axios拦截请求并实现下载

为了下载文件,我们通常会采用以下步骤:

<强>发送请求

获得响应

通过响应判断返回是否为文件

如果是文件则在页面中插入帧

利用帧实现浏览器的得到下载

<强>我们可以为axios添加一个拦截器:

import axios 得到& # 39;axios& # 39;//download url 　　const downloadUrl =, url =祝辞,{ 　　,let iframe =, document.createElement (& # 39; iframe # 39;)=,iframe.style.display & # 39;没有# 39; 　　iframe.src =, url=,,iframe.onload function (), { 　　,document.body.removeChild (iframe) 　　,} 　　,document.body.appendChild (iframe) 　　}//,Add a response 拦截器　　axios.interceptors.response.use (c=祝辞,{ 　　,//处理excel文件　　,if (res.headers ,,, (res.headers[& # 39;内容类型# 39;],===,& # 39;应用程序/x-msdownload& # 39;, | |, res.headers[& # 39;内容类型# 39;],===,& # 39;应用程序/vnd.openxmlformats-officedocument.spreadsheetml.sheet& # 39;)), { 　　,downloadUrl (res.request.responseURL) 　　, 　　,& lt; span 祝辞,res.data=https://www.yisu.com/zixun/? 　　res.headers(“内容类型”)='文本/json ' 　　返回res; 　　} 　　… 　　返回res;=>{},错误　　//做一些与响应误差　　返回Promise.reject (error.response。数据| | error.message) 　　}) 　　出口默认axios

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。