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


Posted in Vue.js onDecember 05, 2020

后台返回的乱码流

解决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下载后台传过来的乱码流的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 #Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 #Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 #Vue.js
对vue生命周期的深入理解
Dec 03 #Vue.js
You might like
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
PHP的PSR规范中文版
2013/09/28 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
js模糊查询实例分享
2016/12/26 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
angular动态表单制作
2018/02/23 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
centos下更新Python版本的步骤
2013/02/12 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
如何使用Pytorch搭建模型
2020/10/26 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
大学四年个人自我小结
2014/03/05 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
小班下学期个人总结
2015/02/12 职场文书
售后服务质量承诺书
2015/04/29 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
2016党员党课心得体会
2016/01/07 职场文书
教师反邪教心得体会
2016/01/15 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android