vue使用axios导出后台返回的文件流为excel表格详解

 更新时间:2022年08月11日 14:22:21   作者:求大牛的小李  
这篇文章主要介绍了vue使用axios导出后台返回的文件流为excel表格方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用axios导出后台返回的文件流为excel

之前有一个需求是要使用post请求,导出后台返回的文件流并在表格中使用,大概思路为使用axios请求回数据,定义数据为blob格式,再创建一个a标签自调就可以完成了

<button @click="download">导出</button>
data() {
    return {
      isClick: true,
    };
  },
download() {
      // 简单的一个小节流
      if (!this.isClick) {
        return;
      }
      this.isClick = false;
      axios({
        method: "POST",
        url: "",
        data: {},
        responseType: "blob", //定义为blob
      }).then((res) => {
        const file = new Blob([res.data], { type: "application/vnd.ms-excel" });
        const url = URL.createObjectURL(file);
        const a = document.createElement("a");
        a.href = url;
        a.click();
        this.isClick = true;
      });
    },

vue axios导出excel乱码解决

最近,公司让我写一个导出excel的功能,由于已经有了前人写好的代码,我就直接拿着他的代码改了一下,结果在前端下载好之后直接出现了乱码问题。

开始我怀疑自己哪里写错了,经过仔细的检查,并没有问题。而且在后台生成的excel并没有任何问题。

后来我以为是读入字节流出现了问题,经过调试对比也是正常的。唯一的问题就是通过后台返回的res出现了乱码。

上网搜索,都说这样写就行了。

和我写的一样。在经过了一天的检查还是无果后,我问了问前辈,原来问题出在这里。

  .post("/TasksTable/ExportData",{
          item: {          
            //传入项目id,根据项目id来 搜素任务
            project_id: this.tasksinfo,
          },
          //页的索引和页的长度。
          PageSize: this.pageSize,
          PageIndex: this.currentPage,
          //定义类型
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },     
          responseType:'blob',         
        })

如图所示,我用一个花括号把我传入的数据和 headers、responseType放在了一起,所以headers和responseType无效了。

.post("/TasksTable/ExportData",{
          item: {          
            //传入项目id,根据项目id来 搜素任务
            project_id: this.tasksinfo,
          },
          //页的索引和页的长度。
          PageSize: this.pageSize,
          PageIndex: this.currentPage,
        },
        {    
          //定义类型
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },     
          responseType:'blob',         
        })

把他们用两个花括号隔开就可以了。最终成功导出!

找不到原因的感觉真头疼啊,看了一天没找到原因,最终通过求助才解决了。哎,这编码之路啊~

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue发布项目实例讲解

    Vue发布项目实例讲解

    在本篇文章里小编给各位分享的是关于Vue发布项目的实例内容以及知识点讲解,需要的朋友们参考下。
    2019-07-07
  • el-table fixed固定列导致错位的解决方法介绍

    el-table fixed固定列导致错位的解决方法介绍

    ElementUI中el-table设置指定列固定不动,不受滚动条影响,下面这篇文章主要给大家介绍了关于el-table fixed固定列导致错位的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue3的provide和inject实现多级传递的原理解析

    Vue3的provide和inject实现多级传递的原理解析

    Vue3中的provide和inject函数通过原型链实现数据的多级传递,父组件使用provide注入数据,子组件和后代组件通过inject获取这些数据,在创建组件实例时,子组件会继承父组件的provides属性对象,介绍Vue3的provide和inject实现多级传递的原理,需要的朋友可以参考下
    2024-12-12
  • vue 自定义提示框(Toast)组件的实现代码

    vue 自定义提示框(Toast)组件的实现代码

    这篇文章主要介绍了vue 自定义提示框(Toast)组件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue中sync修饰符分析原理及用法示例

    Vue中sync修饰符分析原理及用法示例

    在vue中,子组件如果想修改父组件的变量,一般做法是通过绑定事件的方法,父组件向子组件传递修改变量的方法,子组件触发修改变量的方法执行,这种方式中规中矩;另一种方法是使用sync修饰符,此方法可以减少很多代码量
    2022-08-08
  • Vuex 入门教程

    Vuex 入门教程

    这篇文章主要介绍了Vuex 入门教程,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式, 那这个 vuex 怎么用呢?就具体来看一下吧
    2018-01-01
  • element-ui tooltip修改背景颜色和箭头颜色的实现

    element-ui tooltip修改背景颜色和箭头颜色的实现

    这篇文章主要介绍了element-ui tooltip修改背景颜色和箭头颜色的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vue在标签中如何使用(data-XXX)自定义属性并获取

    vue在标签中如何使用(data-XXX)自定义属性并获取

    这篇文章主要介绍了vue在标签中如何使用(data-XXX)自定义属性并获取,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 浅谈VUE uni-app 基础组件

    浅谈VUE uni-app 基础组件

    这篇文章主要介绍了uni-app 的基础组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • vue 基于abstract 路由模式 实现页面内嵌的示例代码

    vue 基于abstract 路由模式 实现页面内嵌的示例代码

    这篇文章主要介绍了vue 基于abstract 路由模式 实现页面内嵌的示例代码,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12

最新评论