vue+axios实现post文件下载
本文实例为大家分享了vue+axios实现post文件下载的具体代码,供大家参考,具体内容如下
功能:点击导出按钮,提交请求,下载excel文件;
这里是axios的post方法。get方法请点击这里=》here
第一步:跟后端童鞋确认交付的接口的response header设置了
以及返回了文件流。
第二步:修改axios请求的responseType为blob,以post请求为例:
axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob' }).then(response => { this.download(response) }).catch((error) => { })
第三步:请求成功,拿到response后,调用download函数(创建a标签,设置download属性,插入到文档中并click)
methods: { // 下载文件 download (data) { if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', 'excel.xlsx') document.body.appendChild(link) link.click() } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue+axios实现文件下载及vue中使用axios的实例
功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了 以及返回了文件流. 第二步:修改axios请求的responseType为blob,以post请求为例: axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob' }).then(response =>
-
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
vue-cli+axios实现附件上传下载记录: 上传: 这里用formData格式传递参数:请求成功后后台返回上传文件的对应信息. 重点是下载: ############## downloadfile(res) { var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //applicati
-
vue element中axios下载文件(后端Python)
•axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuffer'} ).then(res=> { if (res.status === 200) { let blob = new Blob([res.data], { type: res.headers['content-type'] }); const fileName = res.headers['c
-
vue实现Excel文件的上传与下载功能的两种方式
一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-button class="pull-right" icon="el-icon-upload" type=&qu
-
Vue 中批量下载文件并打包的示例代码
思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 1. 准备工作 安装 3 个依赖: axios, jszip, file-saver yarn add axios yarn add jszip yarn add file-saver 2. 下载文件 import axios from 'axios' const getFile = url => { return new Promise((resolve, reject) => { a
-
vue实现文件上传读取及下载功能
本文实例为大家分享了vue实现文件上传读取及下载的具体代码,供大家参考,具体内容如下 文件的上传利用input标签的type="file"属性,读取用FileReader对象,下载通过创建a标签实现 <template> <div class="filediv"> <el-button @click="downloadFile">下载</el-button> <div id="fil
-
vue+axios实现post文件下载
本文实例为大家分享了vue+axios实现post文件下载的具体代码,供大家参考,具体内容如下 功能:点击导出按钮,提交请求,下载excel文件: 这里是axios的post方法.get方法请点击这里=>here 第一步:跟后端童鞋确认交付的接口的response header设置了 以及返回了文件流. 第二步:修改axios请求的responseType为blob,以post请求为例: axios({ method: 'post', url: 'api/user/', data: { firs
-
vue使用axios实现excel文件下载的功能
前端VUE页面上的导出或者下载功能,一般是调用后端的一个接口,由接口生成excel,word这些文件的流信息,返回给vue,然后由vue去构建下载的动作,这边整理了一下,封装了一下,方便以后复用. 封装一个download文件 使用年月日时分秒毫秒做为文件的名称,下载为excel文件 /** * 下载文件 */ export const downloadFile = (url,ext, params) => { let accessToken = getStore('accessToken');
-
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
前言 我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息 我使用的前端框架是Vue.js.后台使用的是node.js node.js生成和导出word文档我参考的是下面这两篇文章,写的挺好的(github上的那篇里面还有node.js生成word.excel.ppt的example,需要详细的可以看里面) https://www.jb51.net/article/144769.htm https://github.com/Ziv-Barber... 问题 node.js上面这两
-
Vue+axios+WebApi+NPOI导出Excel文件实例方法
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页(如会员信息,订单信息等)表格数据导出,如表格数据进行了条件筛选,则需要将条件传至后端api,筛选数据后,导出成Excel. 思考过前端导出的3种方案: 1.使用location.href 打开接口地址.缺点: 不能传token至后端api, 无法保证接口的安全性校验,并且接口只能是get方式请求.
-
vue+element+springboot实现文件下载进度条展现功能示例
目录 1. 需求背景 2. 优化方案 3. 具体实现 3.1 前端代码 3.2 后台代码 4. 总结 本文主要介绍了vue+element+springboot实现文件下载进度条展现功能示例,分享给大家,具体如下 最终效果图 1. 需求背景 最近接到一个优化需求,原系统文件下载功能体验不友好,特别是下载一些比较耗时的文件,用户在页面上傻等不知道下载的进度是怎么样的,总以为是系统卡死了. 2. 优化方案 后台优化下载速度(可以研究一下分片下载,这里不做展开) 改造前端用户体验(比如点击下载后你要显
-
vue axios同步请求解决方案
在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求 解决方案 目前没有发现axios可以同步请求,所以只能使用jQuery,配置同步请求: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:false, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json'
-
vue axios用法教程详解
axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1. Vue.prototype.$ajax=axio
-
vue axios 在页面切换时中断请求方法 ajax
如下所示: Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ method: 'post', url:url, data: data, cancelToken: new C
-
vue axios 表单提交上传图片的实例
项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的 multipart/form-data 接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag
随机推荐
- angular.element方法汇总
- oracle、mysql数据库停止与启动的批处理文件
- AngularJS解决ng-if中的ng-model值无效的问题
- Vuex之理解Mutations的用法实例
- .Net Core+Angular Cli/Angular4开发环境搭建教程
- linux系统使用python监测网络接口获取网络的输入输出
- .net实现oracle数据库中获取新插入数据的id的方法
- php中通过虚代理实现延迟加载的实现代码
- python发送邮件功能实现代码
- JavaScript进阶教程(第二课)第1/3页
- 关于MySQL数据迁移--data目录直接替换注意事项的详解
- java9学习系列之在docker中如何运行java9
- Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
- python实现根据用户输入从电影网站获取影片信息的方法
- MySQL数据库分区功能的使用教程
- bootstrap监听滚动实现头部跟随滚动
- 利用图片做木马应用完全解析
- Python提取Linux内核源代码的目录结构实现方法
- Linux使用Cron+AT实现在某个确定的时间段内随机执行命令
- nginx 目录密码保护的设置方法