当前位置:主页 > vue.js教程 > vue下载excel的实现代码后台用post方法

详解vue下载excel后台用post方法

发布:2020-01-28 17:43:21 136


给网友们整理vue相关的编程文章,网友郝韫玉根据主题投稿了本篇教程内容,涉及到vue、excel、post、vue下载excel的实现代码后台用post方法相关内容,已被765网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

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

后台方法的参数必须是@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方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


参考资料

相关文章

  • Vue2 配置 Axios api 接口调用文件的具体步骤

    发布:2020-07-07

    本篇文章主要介绍了Vue2 配置 Axios api 接口调用文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 实例详解Python使用SQLite和Excel操作进行数据分析

    发布:2020-01-28

    这篇文章主要介绍了Python使用SQLite和Excel操作进行数据分析,小编觉得还是挺不错的,具有一定借鉴价值,需要的朋友可以参考下


  • Vue.js结合Ueditor富文本编辑器知识点讲解

    发布:2020-01-03

    本篇文章主要介绍了Vue.js结合Ueditor的项目实例代码,这里整理了详细的代码,具有一定的参考价值,有兴趣的可以了解一下


  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    发布:2022-07-11

    为网友们分享了关于VUE的教程,这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一


  • python实现excel和csv中的vlookup函数示例代码

    发布:2023-03-05

    这篇文章主要介绍了python实现excel和csv中的vlookup函数,介绍如何使用python在excel和csv里实现vlookup函数的功能,首先需要简单了解一下python如何操作excel,需要的朋友可以参考下


  • vue路由守卫+登录态管理实例分析

    发布:2023-01-13

    给大家整理了关于vue的教程,这篇文章主要介绍了vue路由守卫+登录态管理,结合实例形式分析了vue路由守卫与登录态管理相关操作步骤与实现技巧,需要的朋友可以参考下


  • 介绍于vue实现swipe分页组件示例效果

    发布:2020-01-26

    本篇文章主要介绍了基于vue实现swipe分页组件实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • vue.js之vue-cli脚手架的搭建详解

    vue.js之vue-cli脚手架的搭建详解

    发布:2023-01-09

    给大家整理了关于vue的教程,本篇文章主要介绍了vue.js之vue-cli脚手架的搭建详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


网友讨论