vue 下载文档乱码的解决

 更新时间:2022年04月28日 14:10:50   作者:前端装酷大神哥  
这篇文章主要介绍了vue 下载文档乱码的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue下载文档乱码

最近写功能 vue导出,但是不知道为啥,一请求接口就是乱码

后来在接口里写上了 这句话 responseType:“blob”,

能下载了赶快高兴打开一看 日,下载下来的文件里面又是乱码

后来不停的琢磨,咦终于找到方法了

这里面加了一句话 终于成功了!

我给大家把代码贴上

 exportAccountApi(data).then(res=>{
        console.log('777666',res)
        const blob = new Blob([res],{type: "application/vnd.ms-excel"});
        let fileName = "存款记录明细.xls";
         if ("download" in document.createElement("a")) {
           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);
           document.body.removeChild(elink);
         }else{
           navigator.msSaveBlob(blob.fileName)
         } 
      })

文件下载返回乱码处理 vue+axios

后端返回数据流是乱码,可以使用new Blob()这个方法处理,可以解决乱码问题。

乱码返回结果如下:

解决方法

    async postClick() {
      const res = await axios({
        url: '后端接口',
        method: 'post',
        data: { id: '文件id' }
        responseType: 'blob'
      })
      const content = res.data
      const fileName = 'a.png' // 文件名称
      // 如果不确定文件类型,type可以写空字符串
      const bolb = new Blob([content], { type: '' })
      if ('download' in document.createElement('a')) {
        const link = document.createElement('a')
        link.download = fileName
        link.style.display = 'none'
        // URL.createObjectURL(bolb) = blob:http://localhost:8080/a34a8a20-acf2-3f21-bc22-45994d9f0290
        link.href = URL.createObjectURL(bolb)
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
      }
    }

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

相关文章

  • Ant Design Vue中的table与pagination的联合使用方式

    Ant Design Vue中的table与pagination的联合使用方式

    这篇文章主要介绍了Ant Design Vue中的table与pagination的联合使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue实现表格数据的增删改查的示例代码

    Vue实现表格数据的增删改查的示例代码

    Vue是一个用于构建用户界面的JavaScript框架,在Vue中可以通过使用Vue组件来实现对表格的增删改查操作,下面将介绍一些基础的Vue组件和技术来实现对表格的增删改查操作,需要的朋友可以参考下
    2024-08-08
  • Vue实现动态样式的多种方法汇总

    Vue实现动态样式的多种方法汇总

    本文要给大家介绍Vue实现动态样式的多种方法,下面给大家带来几个案列,需要的朋友可以借鉴研究一下。
    2021-06-06
  • 一文带你搞懂Vue3.5的响应式重构

    一文带你搞懂Vue3.5的响应式重构

    在Vue3.5版本中最大的改动就是响应式重构,重构后性能竟然炸裂的提升了56%,本文我们来讲讲使用双向链表后,Vue内部是如何实现依赖收集和依赖触发的,感兴趣的可以了解下
    2024-11-11
  • vue实现倒计时功能

    vue实现倒计时功能

    这篇文章主要为大家详细介绍了vue实现倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • Element的el-tree控件后台数据结构的生成以及方法的抽取

    Element的el-tree控件后台数据结构的生成以及方法的抽取

    这篇文章主要介绍了Element的el-tree控件后台数据结构的生成以及方法的抽取,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 使用vue-router设置每个页面的title方法

    使用vue-router设置每个页面的title方法

    下面小编就为大家分享一篇使用vue-router设置每个页面的title方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue踩坑记录之src的动态绑定赋值问题

    vue踩坑记录之src的动态绑定赋值问题

    这篇文章主要介绍了vue踩坑记录之src的动态绑定赋值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 在Vue3中为路由Query参数标注类型的方法

    在Vue3中为路由Query参数标注类型的方法

    这篇文章主要介绍了在Vue3中如何为路由Query参数标注类型,我们就针对这个话题如何为路由Query参数标注类型为例,看看Composable和IOC容器的代码风格究竟有什么不同,需要的朋友可以参考下
    2024-08-08
  • vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作

    vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作

    这篇文章主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论