前端base64转Blob,Blob转文件下载

简介: 前端将base64字符串转换为Blob对象,再将Blob对象转换为文件并实现下载。包括处理数据URL和纯base64字符串的情况,并提供了一个辅助函数用于转换。

base64转Blob

 dataURLtoBlob = (dataurl) => {
   
        try {
   
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);

            while (n--) {
   
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
    type: mime });
        } catch{
   
            let arr = dataurl.split(',');
            // let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[0]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);

            while (n--) {
   
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr]);
        }
    }

Blob转文件下载

res.data.fileName:后端带来的文件名;
res.data.data base64串;

           var eleLink = document.createElement("a");
            eleLink.download = res.data.fileName;
            eleLink.style.display = "none";
            // 字符内容转变成blob地址
            var blob = new Blob([this.dataURLtoBlob(res.data.data)]);
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
目录
相关文章
|
3月前
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
321 5
|
2月前
|
JSON 前端开发 Go
前端文件下载的方式
【10月更文挑战第5天】
125 58
|
6月前
|
存储 缓存 前端开发
全面解析:前端超大文件下载的关键技巧与优化策略
全面解析:前端超大文件下载的关键技巧与优化策略
291 1
全面解析:前端超大文件下载的关键技巧与优化策略
|
5月前
|
前端开发 JavaScript
Vue前端渲染blob二进制对象图片的方法
Vue前端渲染blob二进制对象图片的方法
317 0
|
6月前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。
|
7月前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
7月前
|
存储 前端开发 JavaScript
前端base64转file文件方法
前端base64转file文件方法
712 0
|
7月前
|
前端开发 JavaScript 小程序
前端图片转base64 方法
前端图片转base64 方法
212 0
|
7月前
|
前端开发 JavaScript
前端 dlhelper 下载辅助库(支持链接后台下载、代理下载、Blob 数据下载,针对代理下载灵活使用)
前端 dlhelper 下载辅助库(支持链接后台下载、代理下载、Blob 数据下载,针对代理下载灵活使用)
87 1
|
7月前
|
JSON 前端开发 JavaScript
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)
JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)