vue中axios利用blob实现文件浏览器下载

背景
在vue中，使用axios向后台请求数据，但只接收返回的response并不能实现浏览器下载，所以需要借助于blob实现文件的浏览器下载，分为两种情况，一种是get请求，使用params，另一种使用post请求，参数使用formdata传参
情景1：get请求，params传参

url与参数部分代码：

this.axios.get('/api/downloadConfig', {params:{oid:oid},responseType:'blob',})

blob具体下载实现代码

 if(res.status === 200){const content = res.data;const blob = new Blob([content]);if('download' in document.createElement('a')){//非IE下载const a = document.createElement('a');a.download = fileName;a.style.display = 'none';a.href = window.URL.createObjectURL(blob);document.body.appendChild(a);a.click();window.URL.revokeObjectURL(a.href);document.body.removeChild(a);}else{//IE10+下载if(typeof window.navigator.msSaveBlob !== 'undefined'){window.navigator.msSaveBlob(blob, _this.selected);}else{let URL = window.URL || window.webkitURL;let downloadUrl = URL.createObjectURL(blob);window.location = downloadUrl;}}

情景2：post请求，formdata传参

url与参数部分代码：

this.axios.post('/api/downloadConfig', form, {responseType:'blob'})

blob具体下载实现代码与上文get请求一致

vue中axios利用blob实现文件浏览器下载相关推荐

axios 超时_聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一 ...
vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
vue中axios如何实现token验证
title: vue中axios如何实现token验证 date: 2018-02-08 17:50:07 tags: [axios,vue] 继上篇实现Auth认证之后,然后每个跳转页面都会在后端验 ...
vue中Axios网络请求之Vue知识点归纳(十)
本文描述 vue 中 Axios 简述 vue 中使用 Axios 发起 get 请求 vue 中使用 Axios 发起 post 请求 1 简述 Axios是一个基于Promise(ES6中用于处理 ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
vue的axios在ie和苹果浏览器后端参数数据接收不到的问题
欢迎大家进群,一起探讨学习微信公众号,每天给大家提供技术干货博主技术笔记博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star vue的axios在ie ...
解决在vue中axios请求超时的问题
解决在vue中axios请求超时的问题参考文章: (1)解决在vue中axios请求超时的问题 (2)https://www.cnblogs.com/zhouyangla/p/8757149.htm ...
vue中axios访问Java后端跨域问题解决
vue中axios访问Java后端跨域问题解决参考文章: (1)vue中axios访问Java后端跨域问题解决 (2)https://www.cnblogs.com/soinve/p/9295009 ...
解决vue中axios同步的问题
解决vue中axios同步的问题参考文章: (1)解决vue中axios同步的问题 (2)https://www.cnblogs.com/zhupanpan/p/11319305.html 备忘一下 ...

vue中axios利用blob实现文件浏览器下载

vue中axios利用blob实现文件浏览器下载相关推荐

最新文章

热门文章