前端处理二进制文件流
前端处理二进制文件流
这个需求其实做了很久了,但是今天突然被人问起,自己却不知所措,表达不完整,所以想重新梳理一下。
问题叙述 : 有时候需要点击一个 按钮 ,实现文件下载 ,而后端返回的数据为二进制流数据。
产生原因
前端页面的编码格式和服务端编码格式不同,正如此时,服务端返回的是 blob格式的数据,而我们使用的是 非 blob格式去解析,所以产生了乱码。
首先
接收二进制流
要想处理这段乱码的数据,首先得先接收,正常情况下axios 不会处理二进制数据,即会去接收但是不会去处理,需要在请求得适合设置 responseType: ‘blob’
axios.get({url: 'xxxxxx',method: 'get',data:{},responseType: 'blob', // 声明返回blob格式
}).then(res => {downLoadBlobFile(res.data, fileName, mimeType);
});
Blob
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
二进制流转为 URL
拿到文件流之后,需要生成一个 URL 来实现下载,我们可以通过 URL.createObjectURL() 方法生成一个链接。
const blob = new Blob([res.data]) // res.data 为接口返回的数据,依实例而行
const URL = URL.createObjectURL(blob) // 生成一个 Blob URL
这时候后端返回的文件流就会被保存在内存里,而生成的URL 就是文件流在内存中的地址(这个地址为临时的,浏览器在 document 卸载时,会自动释放它们)。
a 标签添加文件名
正常情况下,通过 window.location = url 就可以下载文件。浏览器判断这个链接是资源而不是页面,就会自动下载文件。
但是通过文件流生成的url 对应的资源是没有文件名的,需要添加文件名。这时候我们需要创建一个 a 标签实现这个功能。
const fileName = 'xxxx.xls' // 文件名+后缀
const listNode = document.createElement("a")
listNode.download = fileName
listNode.style.display = "none"
listNode.href = URL // 文件流生成的url
document.body.appendChild(listNode)
listNode.click() // 模拟在按钮上实现一次鼠标点击
URL.revokeObjectURL(listNode.href) // 释放 URL 对象
document.body.removeChild(listNode) // 移除 a 标签
这样就完成了
前端处理二进制文件流相关推荐
- 前端接收二进制文件流(使用blob对象)
前端在做管理系统开发时经常遇到的需求:下载文件入Excel,World,zip 处理方式有两种: 1.后端生成下载地址,前端调用 2.后端返回二进制文件流,前端转换后下载 本文主要介绍第二种 在向后端 ...
- 前端下载文件(二进制文件流brob和url下载)
第一种二进制文件流brob下载文件 1首先自己在request封装一个get请求 引入main.js import axios from 'axios'; import qs from 'qs'; i ...
- JS上传文件(base64字符串和二进制文件流)
①以base64字符串上传(使用FileReader对象获取文件的base64字符串) FileReader参考文档: FileReader - Web API 接口参考 | MDN FileRead ...
- SpringBoot+Vue+Itext实现前端请求文件流的方式导出PDF时在指定位置添加照片
场景 SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF: SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF_BADAO_LIUMANG_QIZHI的 ...
- vue3+axios:图片链接转换成二进制文件流后并提交服务器
一.基本思路 1.使用Image类创建一个新的图片. 2.将图片转换成base64. 3.将base64图片使用File类转换成二进制文件流 4.将二进制文件流使用 FormData类转换成binar ...
- 前端二进制文件流下载
前端下载 如何用ajax请求二进制文件流下载文件 Blob-type 如何用ajax请求二进制文件流下载文件 用jquery封装的$ajax请求的话设置responseType属性是无效的,需要使用原 ...
- 前端下载文件方法、 后台接口返回二进制文件流、前端通过blob对象并使用fetch/axios实现下载
在项目中实现文件下载的方法: 一.接口返回url或者get请求访问接口直接下载. window.location.href = xxxurl 使用a标签下载 const alink= document ...
- 前端get请求接收后端传来的二进制文件流blob实现下载功能,解决下载文件打不开问题
解决方法: 前端在请求下载文件接口时,要设置responseType为blob. 前端代码: export function download(url, params) {return ...
- 后端返回二进制文件流 前端处理并下载jpg格式图片
后端返回数据格式: 实现效果: 应用 axios+vue //下载二维码onDownloadQR() {let data = {code: this.downloadQr,};downqrcode(d ...
- 前端 导出二进制流文件
前端 导出excel文件 日常项目 会经常碰到 导出pdf excel world 文件,正常来说后端都会返回一个下载链接.前端只需要放到点击事件打开即可,但是有的时候 也会返回一个二进制流文件.看起 ...
最新文章
- 用 Flask 来写个轻博客 (37) — 在 Github 上为第一阶段的版本打 Tag
- sql server日期时间函数
- VS2010生成静态库(.lib)
- 《聚爆Implosion》性能精析:这是我们测过性能最棒的手游
- 【Qt】modbus之串口模式写操作
- Android Studio (6)---Gradle
- Java十进制转二、八、十六进制方法
- 数据结构—线索二叉树
- IIS SSL证书 指定的登录会话不存在,可能已被终止 HRESULT:0x80070520
- 九九乘法表(c语言)
- 跨省市跳槽,社保公积金处理办法
- ndows 内存诊断工具,Windows10自带内存检测工具的使用方法
- Eighth Week(补充完整)
- Python爬虫实战(一) QQ音乐评论爬取及可视化分析
- 单片机2017福建省中职省赛_2017年福建省职业院校技能大赛首批设115个赛项
- Java中的XML解析
- 物联网发展前景和统一通信
- linux实验二文件与文件夹操作
- Kotlin 编程实战
- ZooKeeper :Java客户端Watcher API介绍