vue.js 使用axios实现下载功能

本文主要来源于知乎一个回答，这里红色部分做了自己的处理，虽然自己的少，可是很有用的几句代码哦

只好回答一下axios如何拦截get请求并下载文件的了。

Ajax无法下载文件的原因

浏览器的GET(frame、a)和POST(form)请求具有如下特点：

response会交由浏览器处理
response内容可以为二进制文件、字符串等

Ajax请求具有如下特点：

response会交由Javascript处理
response内容仅可以为字符串

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

Axios拦截请求并实现下载

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

发送请求
获得response
通过response判断返回是否为文件
如果是文件则在页面中插入frame
利用frame实现浏览器的get下载

我们可以为axios添加一个拦截器：


import axios from 'axios'// download url
const downloadUrl = url => {let iframe = document.createElement('iframe')iframe.style.display = 'none'iframe.src = urliframe.onload = function () {document.body.removeChild(iframe)}document.body.appendChild(iframe)
}// Add a response interceptor
axios.interceptors.response.use(c=> {// 处理excel文件if (res.headers && (res.headers['content-type'] === 'application/x-msdownload' || res.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {downloadUrl(res.request.responseURL)res.data='';res.headers['content-type'] = 'text/json'return res;}...return res;
}, error => {// Do something with response errorreturn Promise.reject(error.response.data || error.message)
})
export default axios

之后我们就可以通过axios中的get请求下载文件了。

结束

主要代码来自：https://www.zhihu.com/question/263323250/answer/267842980

另一种方法

由于兼容性等问题，其实导出直接用链接更方便一些，兼容性也好，参数不是很多的话放在请求路径后面也是ok的，具体如下：

//导出exportOrderList() {this.formItem.token = Cookies.get('token');let param = "";for(let field in this.formItem) {if(this.formItem[field]) {param += field + "=" + this.formItem[field] + "&";}}param = param.substring(0, param.length-1);let url = "api/queryListExport?" + param;window.location.href = url;},

关键就是这句哦：

window.location.href = url;

这样也不需要像上面加拦截器什么的了哦，方便好用
---------------------

原文：https://blog.csdn.net/seanxwq/article/details/78975661

vue.js 使用axios实现下载功能相关推荐

html鼠标悬浮更换图片,Vue.js鼠标悬浮更换图片功能
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现. 首先将所有的选中后图片都覆盖到没选中图片上 c ...
vue 仿日历格式对账单下载功能
本次主要是使用vue+element UI来完成对账单功能的实现,需求是当前时间及之前一天不可点击,大于当前日期置灰不可点击. 模板简陋敬请谅解 - 先上效果图 vue 页面布局方便数据渲染 < ...
vue.js实现带表情评论功能前后端实现（仿B站评论）
文章目录学习链接效果图后台建表评论表(重要) 用户表实体类 Comment User CommentDTO(重要) WebConfig配置配置跨域和静态资源文件夹 Mybatisplus ...
vue.js中文官网下载vue.js失败了？
访问vue官网 https://v2.cn.vuejs.org/v2/guide/installation.html下载vue.js,页面直接报错404,只需要切换到英文版,重新下载即可成功. 或者直 ...
vue根据url获取内容axios_使用Vue.js和Axios从第三方API获取数据 — SitePoint
更多的往往不是,建立你的JavaScript应用程序时,你会想把数据从远程源或消耗一个[ API ](https:/ /恩.维基百科.org /维基/ application_programming_ ...
前端vue不经过后台实现下载功能本地打印出现报错跨域问题
这段时间有个项目对接法院的项目,主要是内网实现笔录的一个下载打印的问题,主要来说一下打印和下载遇到的坑的问题.首先是打印的问题,这边就是需求就是根据html的东西完了点击打印直接下载为docx的wo ...
VUE.JS 使用axios数据请求时数据绑定时报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法...
data里面做了定义在方法里面进行赋值用 this.info = repos.data 数据可以请求到,但是会报错 TypeError: Cannot set property 'listgrou ...
vue实现表格的‘模板下载‘功能
样式: 实现点击'模板下载'按钮,下载下方表格模板 css代码: <el-button type="text" class="marginL5" @cli ...
vue/js实现文件流下载，文件下载进度监听
/*** 文档下载(通过文档请求,直接下载文档)* url 请求路径* fileName 下载名称* size 文件大小*/loadDown (url, fileName, size) {var _t ...

vue.js 使用axios实现下载功能

Ajax无法下载文件的原因

Axios拦截请求并实现下载

结束

另一种方法

vue.js 使用axios实现下载功能相关推荐

最新文章

热门文章