vue + axios get下载文件功能


Posted in Javascript onSeptember 25, 2019

本文实例为大家分享了vue + axios 下载文件的具体代码,供大家参考,具体内容如下

这里是axios的get方法。post方法请点击这里=》here

vue + axios get下载文件功能

注意点:

Herder 请求头需注意

  • content-disposition:”attachment;filename=total.xls”
  • content-type:”application/x-download;charset=utf-8”

axios请求的responseType为blob

  • responseType:'blob',

template

<button class="os_myProduct_td6Div5Btn2" @click.stop="downloadReport(item,index)">下载当天报表</button>

script

methods:{
 downloadReport(item,index){
 let date = item.plans[this.daysIndex[index]]
 let url = '/Ecp.Export.exportXls.jdn?entityId='+item.FId+'&date='+date.FDeparture_date+'&token=' + sessionStorage.getItem("token")
 this.axios({
 method:'get',
 url:url,
 responseType:'blob',
 })
 .then((data) => {
 if (!data) {
  return
 }
 debugger
 let url = window.URL.createObjectURL(data.data)
 let link = document.createElement('a')
 link.style.display = 'none'
 link.href = url
 link.setAttribute('download', 'excel.xls')
 document.body.appendChild(link)
 link.click()
 })
 },
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
angularJS深拷贝详解
Mar 23 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 #Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 #jQuery
axios实现文件上传并获取进度
Mar 25 #Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 #Javascript
axios实现简单文件上传功能
Sep 25 #Javascript
layer弹出层取消遮罩的方法
Sep 25 #Javascript
QML实现圆环颜色选择器
Sep 25 #Javascript
You might like
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php 问卷调查结果统计
2015/10/08 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
采购求职信
2014/03/17 职场文书
工作会议方案
2014/05/21 职场文书
故宫的导游词
2015/01/31 职场文书
2016年教师新年寄语
2015/08/18 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android