解决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的mixin策略
Nov 19 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue如何清除浏览器历史栈
May 25 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中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
微信支付开发交易通知实例
2016/07/12 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
商场总经理岗位职责
2014/02/03 职场文书
英语辞职信范文
2015/02/28 职场文书
2016党校培训心得体会
2016/01/07 职场文书