解决axios接收二进制流文件乱码问题
1. 须将axios 配置中的responseType
设置为arraybuffer
,这样就不会让表格出现乱码现象;
2. 如果要动态设置文件名则需要让后台将名字设置到响应头中,否则将是一个乱码的文件名;
3. 然后通过<a></a>
标签的特性来自动点击下载文件;
4. 如果要兼容IE则需要利用navigator.msSaveOrOpenBlob
方法;
5. 兼容Firefox 须将<a></a>
标签添加到body
中,最后再移除<a></a>
标签
例子:
// axios config
config = {
responseType: 'arraybuffer'
}
// 返回数据处理
getUserInfoExport(data).then(({data,headers}) => {
let blob = new Blob([data], { type: 'application/vnd.ms-excel' }) // 将服务端返回的文件流(二进制)excel文件转化为blob
let fileName = headers.filename
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE
window.navigator.msSaveOrOpenBlob(blob, fileName)
} else {
let objectUrl = (window.URL || window.webkitURL).createObjectURL(blob)
let downFile = document.createElement('a')
downFile.style.display = 'none'
downFile.href = objectUrl
downFile.download = fileName // 下载后文件名
document.body.appendChild(downFile)
downFile.click()
document.body.removeChild(downFile) // 下载完成移除元素
// window.location.href = objectUrl
window.URL.revokeObjectURL(objectUrl) // 只要映射存在,Blob就不能进行垃圾回收,因此一旦不再需要引用,就必须小心撤销URL,释放掉blob对象。
}
})
解决axios接收二进制流文件乱码问题的更多相关文章
- Linux网络中接收 "二进制" 流的那些事 --- 就recv的返回值和strlen库函数进行对话
1. 前言 很多朋友在做网络编程开发的时候可能都遇到这样的问题,在进行接收二进制流的数据的时候,使用strlen库函数来得到 二进制数据长度的时候并不准确.为什么呢??首先,使用strlen进行 ...
- 解决Ubuntu和Windows的文件乱码问题(转载)
解决Ubuntu和Windows的文件乱码问题(debian也通用) 1.转换文件内容编码 Windows下天生的纯文本文件,其中文编码为GBK,在Ubuntu下显示为乱码,可以使用iconv命令 ...
- php从数据库中取二进制流文件转换为图片,图片以二进制流存入数据库实现
php从数据库中取二进制流文件转换为图片,图片以二进制流存入数据库实现 function data_uri($contents, $mime) { $base64 = base64_encode($c ...
- 第六章 MVC之 FileResult和JS请求二进制流文件
一.FileResult 1.简介 表示一个用于将二进制文件内容发送到响应的基类.它有三个子类: FileContentResultFilePathResultFileStreamResult 推荐阅 ...
- c#中文件与二进制流文件的转换
将文件转换成二进制方法: /// <summary> /// 将文件转换成二进制 /// </summary> /// <param name=&quo ...
- 解决Ubuntu和Windows该文件乱码问题
1.转换文件内容编码 Windows在自然纯文本文件.当中国作为编码GBK,在Ubuntu下乱码,可以使用iconv命令转换: iconv -f gbk -t utf8 source_fi ...
- 接收二进制流(ArrayBuffer) ,并且显示二进制流图片
1.调用接口,返回二进制流数据 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { && xhr ...
- 解决WebView加载本地文件乱码
一.问题描述 这几天现场反馈一些问题,主要是文件浏览有部分文件显示乱码,像这样: 而文件本身又是用WebView加载的,出现有的文件正常有的文件不正常. 二.问题解决 webView 加载主要有:lo ...
- 解决Mac上打开txt文件乱码问题
出处:https://www.jianshu.com/p/f55ddf1e9839 经常会在Mac上打开一个txt文件,发现里面的中文都是乱码,问题是在Windows和手机上看都完全是正常的,这就十分 ...
随机推荐
- 03 Javascript的数据类型
数据类型包括:基本数据类型和引用数据类型 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还是引用类型值 ...
- Spring Boot:使用Rabbit MQ消息队列
综合概述 消息队列 消息队列就是一个消息的链表,可以把消息看作一个记录,具有特定的格式以及特定的优先级.对消息队列有写权限的进程可以向消息队列中按照一定的规则添加新消息,对消息队列有读权限的进程则可以 ...
- spring 5.x 系列第8篇 —— 整合Redis客户端 Jedis和Redisson (代码配置方式)
文章目录 一.说明 1.1 Redis 客户端说明 1.2 Redis可视化软件 1.3 项目结构说明 1.3 依赖说明 二.spring 整合 jedis 2.1 新建基本配置文件和其映射类 2.2 ...
- navicat中查重并删除
# 查询所有重复的数据 SELECT * FROM hao123 WHERE ir_url IN (SELECT ir_url FROM `hao123` GROUP BY ir_url having ...
- 侦听器watch 监听单个属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- scrapy基础知识之 CrawlSpiders:
通过下面的命令可以快速创建 CrawlSpider模板 的代码: scrapy genspider -t crawl spidername xx.com LinkExtractors class sc ...
- 从零开始实现放置游戏(十)——实现战斗挂机(1)hessian服务端搭建
前面实现RMS系统时,我们让其直接访问底层数据库.后面我们在idlewow-game模块实现游戏逻辑时,将不再直接访问底层数据,而是通过hessian服务暴露接口给表现层. 本章,我们先把hessia ...
- C++学习书籍推荐《C++编程思想第二版第一卷》下载
百度云及其他网盘下载地址:点我 编辑推荐 “经典原版书库”是响应教育部提出的使用原版国外教材的号召,为国内高校的计算机教学度身订造的.<C++编程思想>(英文版第2版)是书库中的一本,在广 ...
- getpass.getpass 无法在pycharm上run显示的 workaround
getpass.getpass 只能通过交互式终端运行.py文件来密文输入密码,想在pycharm里运行,好不容易找到一个小窍门,记录如下 from easygui import passwordbo ...
- 基于webpack4+vue-cli3项目的换肤功能
起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...