解决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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 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
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
DOM相关内容速查手册
2007/02/07 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python pass详细介绍及实例代码
2016/11/24 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
工程采购员岗位职责
2014/03/09 职场文书
三项教育活动实施方案
2014/03/30 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
安全生产演讲稿
2014/05/09 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技
python使用BeautifulSoup 解析HTML
2022/04/24 Python