Base64编码与打印标签(label)实例

---

前言

文件格式转换，在日常编程尤为常见，例如pdf文件大小的压缩存储，前端用img 标签显示图片。那这么有用的编码格式，下面就让我来认识下base64相关知识，以及实际开发接触的代码示例.

---

往期打印相关集成：
vue3 集成菜鸟打印组件
Lodop 常用指令与解析

一、Base64 的简单认识

Base64是一种编码格式，用于将二进制数据转换为文本字符，使其可以在文本协议中传输。它的规则如下：

1. 将原始二进制数据分割成每3个字节一组，每个字节占8位，总共24位。
2. 将每组数据转换成4个6位的数字，即24位数据被转换成4个6位数。如果原始数据不足3个字节，则在末尾添加0补齐。
3. 将这4个6位数字转换成对应的Base64字符，如A-Z、a-z、0-9、+、/，共64个字符。
4. 如果数据长度不是3的倍数，补充1或2个“=”字符作为填充，使得数据长度成为4的倍数。
5. 将所有的字符连接起来，形成Base64编码字符串。

例如，原始二进制数据为01010100 01100101 01110011 01110100 00100000 01101101 01100101，将其转换为Base64编码后为：VGVzdCBtZQ==。其中“=”字符是填充字符。

二、Base64的使用场景

base64的常见实际使用场景：

1. 数据传输：在网络传输中，常常需要将二进制数据转换为文本格式进行传输，因为文本格式对于不同平台和设备具有更好的兼容性。base64编码就是一种将二进制数据转换为文本格式的编码方式，因此在数据传输过程中经常使用base64编码。

2. 加密解密：有些加密算法只能加密文本格式的数据，因此需要将二进制数据转换为文本格式进行加密。而base64编码可以将二进制数据转换为文本格式，所以在某些加密算法中也会使用base64编码。

3. 图片、音频、视频处理：在一些场景中，需要对图片、音频、视频等二进制数据进行处理，比如上传到网站、发送到社交网络等。由于这些数据不是文本格式，不能直接传输，因此需要将其转换为文本格式。 这时，就可以使用base64编码来将这些数据转换为文本格式进行传输。

4. 数据存储：在一些数据库和存储系统中，需要将二进制数据存储为文本格式。由于base64编码可以将二进制数据转换为文本格式，因此在一些数据存储系统中也会使用base64编码。

三、 Base64的解码注意问题

1. 输入数据必须是经过Base64编码的数据。
2. 解码后的数据格式可能是二进制格式，而不是文本格式，需要根据实际情况进行转换。
3. 当解码的数据出现错误时，会抛出异常，需要进行异常处理。
4. 由于Base64编码中使用了特殊字符，如"+“、”/“和”=", 可能会与一些编程语言的特殊字符产生冲突，所以在解码时需要注意这些字符可能会被转义或丢失。
5. 在某些情况下，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 转换为arrayBuffer，blod

// 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等格式。