vue下载excel的实现代码后台用post方法


Posted in Javascript onMay 10, 2019

后台方法的参数必须是@RequestBody修饰的。

      前台关键代码:   

axios ( {
     method : 'post',
     url : api.exportPlayTime , // 请求地址
     data : {
      choose : type,
      begindate : startDate,
      enddate : endDate
     },
     responseType : 'arraybuffer',
     observe: 'response',
    } )
     .then ( ( res ) => {

      const fileName = ""+filename+".xlsx"
      let blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
      if ( 'download' in document.createElement ( 'a' ) ) { // 非IE下载
       const elink = document.createElement ( 'a' )
       elink.download = fileName
       elink.style.display = 'none'
       elink.href = URL.createObjectURL ( blob )
       document.body.appendChild ( elink )
       elink.click ()
       URL.revokeObjectURL ( elink.href ) // 释放URL 对象
       document.body.removeChild ( elink )
      } else { // IE10+下载
       navigator.msSaveBlob ( blob, fileName )
      }
     })
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下载excel的实现代码后台用post方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
原生JS进行前后端同构
Apr 22 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
微信小程序如何再次获取用户授权的方法
May 10 #Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 #Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 #Javascript
vue element中axios下载文件(后端Python)
May 10 #Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 #Javascript
简单通过settimeout看javascript的运行机制
May 10 #Javascript
详解js实时获取并显示当前时间的方法
May 10 #Javascript
You might like
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
浅谈webpack组织模块的原理
2018/03/10 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
react中hook介绍以及使用教程
2020/12/11 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python线程详解
2015/06/24 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
数控专业毕业生自荐信范文
2014/03/04 职场文书
安全生产大检查方案
2014/05/07 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle