Vue下载Excel后报错,或打不开的解决

 更新时间:2024年02月28日 08:44:50   作者:广州第22号吴彦祖  
这篇文章主要介绍了Vue下载Excel后报错,或打不开的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题描述

后端返回excel文件流后, 在Swagger 和 PostMan上进行下载测试均正常

下载及打开

但是在项目中下载打开却出现: WPS表格在试图打开文件时遇到错误.

如图

问题呢,是我们在发送请求时,没有声明返回的responseType

设置一下就好了

上代码:

// 加上responseTape 
export function getSiteElectricDataExcel(data) {
  return request({
    url:apiURL.newDataSite,
    method: 'post',
    data,
    responseType: 'blob'
  })
}

接收后的下载逻辑:

download(){
     getSiteElectricDataExport(this.params).then(res=>{
        let url = window.URL.createObjectURL(new Blob([res]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        // 生成时间戳
        let timestamp = name+"_" + new Date().getTime();
        link.download = "测试文档.xlsx";
        document.body.appendChild(link);
        link.click();
      })
    },

总结

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

相关文章

  • Vue Router动态路由实现实现更灵活的页面交互

    Vue Router动态路由实现实现更灵活的页面交互

    Vue Router是Vue.js官方的路由管理器,用于构建SPA(单页应用程序),本文将深入探讨Vue Router的动态路由功能,希望可以帮助大家更好地理解和应用Vue.js框架
    2024-02-02
  • vue项目中按钮防抖处理实现过程

    vue项目中按钮防抖处理实现过程

    这篇文章主要给大家介绍了关于vue项目中按钮防抖处理实现的相关资料,在项目开发中相必大家时常会遇到按钮重复点击后引起事件重复提交的问题,需要的朋友可以参考下
    2023-08-08
  • el-table树形表格表单验证(列表生成序号)

    el-table树形表格表单验证(列表生成序号)

    这篇文章主要介绍了el-table树形表格表单验证(列表生成序号),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Vue绑定对象与数组变量更改后无法渲染问题解决

    Vue绑定对象与数组变量更改后无法渲染问题解决

    这篇文章主要介绍了Vue绑定对象与数组变量更改后无法渲染问题解决,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • vue项目嵌套iframe实现发送、接收数据

    vue项目嵌套iframe实现发送、接收数据

    这篇文章主要介绍了vue项目嵌套iframe实现发送、接收数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 使用antv替代Echarts实现数据可视化图表详解

    使用antv替代Echarts实现数据可视化图表详解

    这篇文章主要为大家介绍了使用antv替代Echarts实现数据可视化图表详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 前端Vue中常用rules校验规则详解

    前端Vue中常用rules校验规则详解

    这篇文章主要介绍了前端Vue中常用rules校验规则详解,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • 使用vue3实现一个人喵交流小程序

    使用vue3实现一个人喵交流小程序

    Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,下面这篇文章主要给大家介绍了关于如何使用vue3实现一个人喵交流小程序的相关资料,需要的朋友可以参考下
    2021-11-11
  • vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)

    vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)

    这篇文章主要介绍了vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue使用keep-alive后清除缓存的方法

    vue使用keep-alive后清除缓存的方法

    这篇文章主要给大家介绍了关于vue使用keep-alive后清除缓存的相关资料,这个问题在我们日常工作中经常会用到,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08

最新评论