前端处理后端返回的二进制流文件

1、前端处理后端返回的二进制流文件

var xhr = new XMLHttpRequest();
xhr.open("post", "/download/scoreFile", true);
xhr.responseType = "blob";  //重点：设置接收类型
xhr.onload = function() {if (this.status == 200) {var url = URL.createObjectURL(this.response);var a = document.getElementById("a");if(!a){a = document.createElement("a");a.setAttribute("id", "aElem");document.body.appendChild(a);}a.href = url;a.click();URL.revokeObjectURL(url)}
}
xhr.send();

注意：如果后端接口返回的是二进制流数据，在发送请求时需要设置responseType=‘blob’，否则收到的数据将是乱码。

2、前端处理后端返回的二进制流乱码图片

var xhr = new XMLHttpRequest();
xhr.open("get", "/verify", true);
xhr.responseType = "arraybuffer";  //重点：设置接收类型
xhr.onload = function() {if (this.status == 200) {let img = document.getElementById("img");let imgBase = btoa(new Uint8Array(response.data).reduce((data, byte) => data +String.fromCharCode(byte),'')); //将返回数据转为为base64img.src = 'data:image/jpg|png;base64,' + imgBase}
}
xhr.send();

拓展

URL.createObjectURL(obj) 方法会创建一个 DOMString，这个 URL 的生命周期和创建它的窗口中的 document 绑定。

语法：URL.createObjectURL(obj)

参数说明：obj为 File 对象、Blob 对象或者 MediaSource 对象。

使用完后，最好调用URL.revokeObjectURL() 释放内存；如果不主动释放内存，浏览器会在页面退出时自动释放。

前端处理后端返回的二进制流文件相关推荐

vue前端怎么下载后端返回的二进制流excel表格文件
文章目录应用场景一.怎么请求接口二.步骤图片 1.res返回数据 2.url地址 3.download属性 4.a标签 5.返回的原式数据,长这样总结应用场景我对表格数据进行勾选,想要把勾 ...
微信小程序微信原生小程序如何通过后端返回的二进制流导出excel文件并保存和转发
因为工作上的原因有这个需求所以记录一下首先后端返回给我们的数据是这样的,一串二进制流然后直接上代码吧,注释基本上说的差不多了 wx.request({url: ``, //这个地方是你获取二进制流 ...
vue 后端返回二进制流文件，前端如何实现下载？
目录 1. axios 请求二进制流文件导出文件 1.1 后台返回的二进制流: 1.2 使用: 1.3 需要注意以下几点: 2. 关于 arraybuffer 和 blob 2.1 ArrayBuff ...
前端导出二进制流文件
前端导出excel文件日常项目会经常碰到导出pdf excel world 文件,正常来说后端都会返回一个下载链接.前端只需要放到点击事件打开即可,但是有的时候也会返回一个二进制流文件.看起 ...
IO 操作（二进制流文件上传下载）
后台二进制流 -> 前台blob对象 ->生成 dateUrl->前台 file->dataUrl -blob ->FormData ->后台 java 后台返回 ...
uniapp 下载文件/二进制流数据文件，保存文件，打开文件。以及H5下载二进制流文件。
前提注意点 downloadFile 发送的是GET请求. 如果url接口返回的是二进制流数据.则要求后端content-type 里面填写具体的返回文件类型.否则下在的文件会没有后缀名.比如exce ...
前端将后端返回的带颜色的数据进行转换
前端将后端返回的带颜色的数据进行转换因为之前在调用后端接口的时候后端返给我的数据显示乱码:具体如下图所示: 然后这些数据在后台显示的是这样的的,如下图所示: 根据以上这三幅图片可以看到有些数据 ...
微信小程序预览二进制流文件
开发时使用调试基准库版本需求在线预览doc/xls/xlsx/ppt/txt/pdf 的文件和图片. 思路将后台返回的二进制流,写入微信的文件管理器. 打开文件. 根据文件类型调用不同预览方法 ...
微信小程序接收二进制流文件（图片预览，文件打开）
下面通过downloadOaFile接口获取到二进制流,即res.data 注意!!!直接用downloadOaFile获取的二进制流文件在写入时会导致文件损坏,必须在uni.request对象的属性 ...
前端通过后端返回的url下载图片方法
前端通过后端返回的url下载图片方法: 1.a标签下载方式: <div class="code-info"><img :src="data.qrCode ...

前端处理后端返回的二进制流文件

1、前端处理后端返回的二进制流文件

2、前端处理后端返回的二进制流乱码图片

拓展

前端处理后端返回的二进制流文件相关推荐

最新文章

热门文章