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

 更新时间:2019年05月10日 16:51:44   作者:六一儿童节  
这篇文章主要介绍了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方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • element-ui滚动条el-scrollbar置底方式

    element-ui滚动条el-scrollbar置底方式

    这篇文章主要介绍了element-ui滚动条el-scrollbar置底方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue主动刷新页面及列表数据删除后的刷新实例

    vue主动刷新页面及列表数据删除后的刷新实例

    今天小编就为大家分享一篇vue主动刷新页面及列表数据删除后的刷新实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3如何获取proxy对象的值而不是引用的方式

    Vue3如何获取proxy对象的值而不是引用的方式

    这篇文章主要介绍了Vue3如何获取proxy对象的值而不是引用的方式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • vue+express 构建后台管理系统的示例代码

    vue+express 构建后台管理系统的示例代码

    这篇文章主要介绍了vue+express 构建后台管理系统的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue-router 导航完成后获取数据的实现方法

    vue-router 导航完成后获取数据的实现方法

    这篇文章主要介绍了vue-router 导航完成后获取数据,通过使用生命周期的 created() 函数,在组件创建完成后调用该方法,本文结合实例代码给大家讲解的非常详细需要的朋友可以参考下
    2022-11-11
  • Vue实现用户没有登陆时,访问后自动跳转登录页面的实现思路

    Vue实现用户没有登陆时,访问后自动跳转登录页面的实现思路

    这篇文章主要介绍了Vue实现用户没有登陆时,访问后自动跳转登录页面,定义路由的时候配置属性,这里使用needLogin标记访问页面是否需要登录,本文通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue中定义全局声明vscode插件提示找不到问题解决

    vue中定义全局声明vscode插件提示找不到问题解决

    这篇文章主要为大家介绍了vue中定义全局声明vscode插件提示找不到问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Vue.js 使用AntV X6的示例步骤

    Vue.js 使用AntV X6的示例步骤

    X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建流程图、DAG 图、ER 图等图应用。接下来就看看vue如何使用它
    2021-05-05
  • 在Vue中实现文件预览与打印的代码示例

    在Vue中实现文件预览与打印的代码示例

    在Vue应用中,有时我们需要实现文件预览和打印的功能,比如,我们可能需要预览并打印PDF文件、图片文件等,本文将介绍如何在Vue中实现文件预览和打印的功能,并提供相应的代码示例
    2023-06-06
  • 解决ant design vue 表格a-table二次封装,slots渲染的问题

    解决ant design vue 表格a-table二次封装,slots渲染的问题

    这篇文章主要介绍了解决ant design vue 表格a-table二次封装,slots渲染的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论