base64 图片预览与文件下载实现方法

394 阅读1分钟

一、base64图片预览

在base64字符串前拼接图片数据格式即可,如data:image/jpg;base64,

<img :src ="'data:image/jpg;base64,'+base64Str" />

二、base64数据转二进制下载

1. 创建 Blob 对象

使用 Blob 构造函数将 Base64 数据转换为二进制数据

// 1. 创建 Blob 对象 
const base64Data = 'yourBase64Data'; 
const byteCharacters = window.atob(base64Data);
const byteArrays = newUint8Array(byteCharacters.length); 
for (let i = 0; i < byteCharacters.length; i++) 
{ 
    byteArrays[i] = byteCharacters.charCodeAt(i); 
} 
const blob = new Blob([byteArrays], { type: 'yourFileType' });
// 2. 创建下载链接并设置下载文件名 
const link = document.createElement('a'); 
link.href = URL.createObjectURL(blob);
link.download = 'yourFileName';
// 3. 触发下载 
document.body.appendChild(link); 
link.click(); 
document.body.removeChild(link);`