vue + axios get下载文件功能

 更新时间:2019年09月25日 10:35:12   作者:Shuah153  
这篇文章主要为大家详细介绍了vue + axios get下载文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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


注意点:

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()
 })
 },
 }

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

相关文章

  • vue-router(this.$router)如何在新窗口打开路由跳转页面

    vue-router(this.$router)如何在新窗口打开路由跳转页面

    这篇文章主要介绍了vue-router(this.$router)如何在新窗口打开路由跳转页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • 前端vue如何使用高德地图

    前端vue如何使用高德地图

    这篇文章主要介绍了前端vue如何使用高德地图,帮助大家利用vue调用其他key,完成需求,感兴趣的朋友可以了解下
    2020-11-11
  • vue使用element-ui按需引入时踩过的那些坑

    vue使用element-ui按需引入时踩过的那些坑

    Element-UI是基于vue实现的一套不依赖业务的UI组件库,提供了丰富的PC端组件,减少用户对常用组件的封装,降低了开发的难易程度,下面这篇文章主要给大家介绍了关于vue使用element-ui按需引入时踩过的那些坑,需要的朋友可以参考下
    2022-05-05
  • Vue如何实现组件的源码解析

    Vue如何实现组件的源码解析

    本篇文章主要介绍了Vue如何实现组件的源码解析,组件继承分为两大类,全局组件和局部组件,有兴趣的可以了解一下
    2017-06-06
  • vue2中使用echarts实现中国地图、在中国地图上标注坐标散点图的操作代码

    vue2中使用echarts实现中国地图、在中国地图上标注坐标散点图的操作代码

    这篇文章主要介绍了vue2中使用echarts实现中国地图、在中国地图上标注坐标散点图,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • 使用Vue指令实现Markdown渲染和代码高亮

    使用Vue指令实现Markdown渲染和代码高亮

    在前端开发中,我们经常需要将Markdown格式的文本渲染成HTML并展示在页面上,同时还希望能够对代码块进行高亮显示,今天我将分享一段代码,通过Vue指令实现了这个功能,需要的朋友可以参考下
    2023-09-09
  • Vue之mixin全局的用法详解

    Vue之mixin全局的用法详解

    这篇文章主要介绍了Vue之mixin全局的用法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue匿名插槽与作用域插槽的合并和覆盖行为

    Vue匿名插槽与作用域插槽的合并和覆盖行为

    这篇文章主要介绍了Vue基础-匿名插槽与作用域插槽的合并和覆盖行为 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 详解基于vue-cli3快速发布一个fullpage组件

    详解基于vue-cli3快速发布一个fullpage组件

    这篇文章主要介绍了详解基于vue-cli3快速发布一个fullpage组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vant实现购物车功能

    vant实现购物车功能

    这篇文章主要为大家详细介绍了vant实现购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06

最新评论