解决vue下载后台传过来的乱码流的问题

 更新时间:2020年12月05日 09:12:46   作者:丹东来了  
这篇文章主要介绍了解决vue下载后台传过来的乱码流的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

后台返回的乱码流

解决办法:

请求方式用的是axios,主要加关键的 {responseType: 'blob'}

axios封装

export function postDownload(url, data) {
  return new Promise((resolve, reject) => {
    instance.post(url,data,{responseType: 'blob'}).then(response => {
      resolve(response);
    }, err => {
      reject(err)
    })
  })
}

下载插件 npm install js-file-download -S

运用:

下载excel时,后台设置了excel标题,要去请求头去取,传输过程中文会有乱码的情况,需要编码下。

let fileDownload = require("js-file-download");

fileDownload(res.data,decodeURIComponent(res.headers['content-disposition'].split("=")[1]));

补充知识:vue下载后台接口返回的二进制流文件转为Excel文件

我就废话不多说了,大家还是直接看代码吧~

this.$http({
 method: "post",
 responseType:"arraybuffer",
 url: '导出接口地址' ,
 data:{}
}).then((res)=>{
 if (res.status === 200 && res.data) {
  var disposition = res.headers['content-disposition'];
  var fileName = decodeURI( disposition.split("filename=")[1].split(";filename*=")[0])
  let blob = new Blob([res.data], { type: 'application/.xls' }); //.xls是我和后台约定好的文件格式
  let link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
  link.remove();

 }
},(err)=>{ var enc = new TextDecoder('utf-8')
 var res = JSON.parse(enc.decode(new Uint8Array(err.data))) //转化成json对象

});

此时注意 responseType:"arraybuffer", 在vue框架当中,数据请求是借助axios的,为此,在发送请求的时候,需要修改responseType,改为arraybuffer,axios默认情况下responseType为json,若是不修改,很可能下载时候会是乱码,或者为null。

以上这篇解决vue下载后台传过来的乱码流的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈element关于table拖拽排序问题

    浅谈element关于table拖拽排序问题

    本文主要介绍了element关于table拖拽排序问题,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue2.0的虚拟DOM渲染思路分析

    vue2.0的虚拟DOM渲染思路分析

    vue2.0采用了虚拟DOM来代替对真实DOM的操作,最后通过某种机制来完成对真实DOM的更新,渲染视图。这篇文章主要介绍了vue2.0的虚拟DOM渲染,需要的朋友可以参考下
    2018-08-08
  • Vue.js 表单校验插件

    Vue.js 表单校验插件

    这篇文章主要介绍了Vue.js 表单校验插件的相关资料,需要的朋友可以参考下
    2016-08-08
  • axios对请求各种异常情况处理的封装方法

    axios对请求各种异常情况处理的封装方法

    今天小编就为大家分享一篇axios对请求各种异常情况处理的封装方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue实现大转盘抽奖功能

    vue实现大转盘抽奖功能

    这篇文章主要为大家详细介绍了vue实现大转盘抽奖功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue手写<RouterLink/>组件实现demo详解

    vue手写<RouterLink/>组件实现demo详解

    这篇文章主要为大家介绍了vue手写<RouterLink/>组件实现demo详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 关于dev-tool安装方法(手动安装版)

    关于dev-tool安装方法(手动安装版)

    这篇文章主要介绍了关于dev-tool安装方法(手动安装版),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue中改变选中当前项的显示隐藏或者状态的实现方法

    vue中改变选中当前项的显示隐藏或者状态的实现方法

    下面小编就为大家分享一篇vue中改变选中当前项的显示隐藏或者状态的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 在Linux服务器上部署vue项目

    在Linux服务器上部署vue项目

    这篇文章介绍了在Linux服务器上部署vue项目的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • 用vue实现注册页效果 vue实现短信验证码登录

    用vue实现注册页效果 vue实现短信验证码登录

    这篇文章主要为大家详细介绍了用vue实现注册页,短信验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论