vue中下载文件后无法打开的坑及解决

 更新时间:2024年02月28日 08:38:54   作者:像牛奶却不是牛奶  
这篇文章主要介绍了vue中下载文件后无法打开的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue下载文件后无法打开

今天在项目开发的时候临时要添加个导出功能我就写了一份请求加导出得代码

代码:

    //导出按钮放开
    exportDutySummarizing (dataRangeInfo) {
      const params = {
        departmentName: dataRangeInfo.name,
        departmentQode: dataRangeInfo.qode
      }
        //拼接所需得url
      const baseUrl = Constants.SERVICES.duty + Constants.DUTY_SUMMARIZING_EXPORT
      this.$axios({
        method: 'POST',
        url: utils.strFormat(baseUrl, {
          departmentName: params.departmentName,
          departmentQode: params.departmentQode
        }),
        headers: {
          Authorization: 'bearer ' + Cookies.get('Access-Token'),//token
          'Content-Type': 'application/json'
        },
        responseType: 'blob',//类型 这个必须要
        data: {//参数
          a: '1'
        }
      })
        .then((response) => {
            //公共的下载方法 在下面展示
          utils.download(response, dataRangeInfo.name + '名字.xlsx')
        })
        .catch(() => { })
    }
    //公共的下载方法
    util.download = function (data, filename) {
      if (!data && !filename) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', filename)
      document.body.appendChild(link)
      link.click()
    }

到这里请求文件流和导出文件得方法都已经写完了,这里面有的坑呢 打开就是返回得数据,大概就是你new Blob([data])得时候这个data是否是文件流,这个例子后端直接给我返回了文件流所以就直接使用了 一边都是res.data这样使用,再有就是responseType: 'blob',这个在请求文件流时请求头中必须要写,其他就没什么了。

如果到这里下载下来的文件还是无法打开请往下看

下面就要说的就是mockjs了

mockjs 会拦截axios, 初始化的时候给拦截响应设置了 responseType: ' ',

所以只需要把 mockjs注释掉或者在.env把VUE_APP_BUILD_MODE设置成nomock中就可以了.

改完记得重启项目!

总结

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

相关文章

  • Vue3组件异步更新和nextTick运行机制源码解读

    Vue3组件异步更新和nextTick运行机制源码解读

    这篇文章主要为大家介绍了Vue3组件异步更新和nextTick运行机制源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 封装一个Vue文件上传组件案例详情

    封装一个Vue文件上传组件案例详情

    这篇文章主要介绍了封装一个Vue文件上传组件案例详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • vue更多筛选项小组件使用详解

    vue更多筛选项小组件使用详解

    这篇文章主要为大家详细介绍了vue更多筛选项小组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue的表单双绑和组件你了解吗

    Vue的表单双绑和组件你了解吗

    这篇文章主要为大家详细介绍了Vue表单双绑和组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • vue 修改vant自带的样式过程

    vue 修改vant自带的样式过程

    这篇文章主要介绍了vue 修改vant自带的样式过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue.js中实现登录控制的方法示例

    vue.js中实现登录控制的方法示例

    这篇文章主要介绍了vue.js中实现登录控制的方法,结合实例形式分析 vue.js操作登陆页面流程控制相关实现技巧,需要的朋友可以参考下
    2018-04-04
  • elementUI el-input 只能输入正整数验证的操作方法

    elementUI el-input 只能输入正整数验证的操作方法

    这篇文章主要介绍了elementUI el-input 只能输入正整数验证,本文给大家详细讲解对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • axios请求的一些常见操作实战指南

    axios请求的一些常见操作实战指南

    axios是一个轻量的HTTP客户端,它基于XMLHttpRequest服务来执行 HTTP请求,支持丰富的配置,支持Promise,支持浏览器端和 Node.js 端,下面这篇文章主要给大家介绍了关于axios请求的一些常见操作,需要的朋友可以参考下
    2022-09-09
  • Vue封装全局toast组件的完整实例

    Vue封装全局toast组件的完整实例

    组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于Vue封装全局toast组件,需要的朋友可以参考下
    2021-07-07
  • vue实现At人文本输入框示例详解

    vue实现At人文本输入框示例详解

    这篇文章主要为大家介绍了vue实现At人文本输入框示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论