文件格式转换，在日常编程尤为常见，例如pdf文件大小的压缩存储，前端用img 标签显示图片。那这么有用的编码格式，下面就让我来认识下base64相关知识，以及实际开发接触的代码示例.
往期打印相关集成：
vue3 集成菜鸟打印组件
Lodop 常用指令与解析
Base64是一种编码格式，用于将二进制数据转换为文本字符，使其可以在文本协议中传输。它的规则如下：
例如，原始二进制数据为01010100 01100101 01110011 01110100 00100000 01101101 01100101，将其转换为Base64编码后为：VGVzdCBtZQ==。其中“=”字符是填充字符。
base64的常见实际使用场景：
数据传输：在网络传输中，常常需要将二进制数据转换为文本格式进行传输，因为文本格式对于不同平台和设备具有更好的兼容性。base64编码就是一种将二进制数据转换为文本格式的编码方式，因此在数据传输过程中经常使用base64编码。
加密解密：有些加密算法只能加密文本格式的数据，因此需要将二进制数据转换为文本格式进行加密。而base64编码可以将二进制数据转换为文本格式，所以在某些加密算法中也会使用base64编码。
图片、音频、视频处理：在一些场景中，需要对图片、音频、视频等二进制数据进行处理，比如上传到网站、发送到社交网络等。由于这些数据不是文本格式，不能直接传输，因此需要将其转换为文本格式。 这时，就可以使用base64编码来将这些数据转换为文本格式进行传输。
数据存储：在一些数据库和存储系统中，需要将二进制数据存储为文本格式。由于base64编码可以将二进制数据转换为文本格式，因此在一些数据存储系统中也会使用base64编码。
后端返回的一串base64的文本，让我在前端显示图片。当然我用的就是常规操作。 , 但是没有正常显示图片出来。这里就要分base64 转码前是不是图片数据。
经了解，说是pdf数据转码的🔐。那我们可以把base64解码得到pdf数据再转为blod，blod在转为base64，前端拿到图片类型base64 那就好办了。
这里我们在 http://labelary.com/viewer.html ，取zpl 代码（zpl ，与打印机通信的代码），
let zplCode = `^XA
^FX Top section with logo, name and address.
^CF0,60
^FO50,50^GB100,100,100^FS
^FO75,75^FR^GB100,100,100^FS
^FO93,93^GB40,40,40^FS
^FO220,50^hello bae64^FS
^XZ`
const formdata = new FormData()
//可以通过append()方法来追加数据
formdata.append('file', zplCode)
// labelary提供的api，返回pdf
fetch('http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/', {
method: 'post',
body: formdata,
header: {
Accept: 'application/pdf',
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function (data) {
if (data?.status == 404) {
return null
}
console.log('data', data)
return data.blob()
})
.then(function (blod) {
if (!blod) {
return ElMessage.warning('Zpl code is incorrect.')
}
console.log(blod)
var reader = new FileReader()
reader.onload = function (e) {
// console.log(e.target?.result) 返回base64 格式
callBackFn(row, e.target?.result)
resolve(true)
}
reader.readAsDataURL(blod)
})
上面的例子经过测试是可行的，拿到图片格式的base64格式后，我用菜鸟打印插件模板语言显示就行，可以正常打印出label（标签）,但是用后端给的base64 解码后出现中文乱码.
我是这样解码的：用js自带的解码方式，咋一看也没有什么问题
window.atob('base64数据')
后来经二次沟通，原来后端给的base64是经过gzip 压缩过的（说是为了传输效率），导致我 window.atob(‘base64数据’) 得到不是原来的数据。😓，这个需要给后端处理后。我用上面的思路应该就可以。
// Base64 字符串
const base64String = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAACBjSFJN" +
"AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJklEQVRIx2NgGJKA" +
"wAMAAFJgGseYwYAAAAASUVORK5CYII=";
// 将 Base64 转换为 ArrayBuffer
const arrayBuffer = Uint8Array.from(atob(base64String.split(",")[1]), (c) => c.charCodeAt(0)).buffer;
// 将 ArrayBuffer 转换为 Blob 对象
const blob = new Blob([arrayBuffer], { type: "image/png" });
上述代码中，通过 atob 函数将 Base64 字符串解码成二进制字符串，再通过 Uint8Array 将二进制字符串转换为 ArrayBuffer 对象。然后，再将 ArrayBuffer 对象转换为 Blob 对象，指定 MIME 类型为 “image/png”。如果需要转换为其他类型的文件，只需要修改 MIME 类型即可。
注意：在使用 atob 函数解码 Base64 字符串时，需要将 “data:image/png;base64,” 这部分前缀去掉，只保留 Base64 编码部分。
在本篇文章，我们认识什么是Base64编码格式，以及它内部的编码规则；也列举了base64的常用使用场景以及注意方面，同时也列举了实际场景使用与代码示例。最后列举几种常用base64转码为arrayBuffer，blod等格式。