如何使用JavaScript从Labelary API的响应中提取PNG图片

问题原因 #

API返回的是PNG格式的二进制流，并非文本内容，因此Chrome开发者工具的「响应」标签页无法正常渲染二进制内容，才会显示为空，「预览」标签是浏览器自动识别二进制流为图片格式后做的特殊渲染。

代码修改点 #

你原有代码存在两处需要调整的地方：

1. 请求逻辑错误，不需要对ZPL字符串做JSON序列化，Labelary接口要求直接将ZPL字符串作为请求体发送即可
2. 拿到响应后需要将其转换为Blob格式，再生成可访问的图片地址，即可实现保存或者页面展示

完整可运行代码 #

JavaScript部分 #

const generateLabelBtn = document.getElementById('generateLabelBtn');

async function requestLabel(zplString) {
  const response = await fetch(`http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/`, {
    method: 'POST',
    body: zplString,
  })
  // 将响应转换为Blob对象
  const imageBlob = await response.blob();
  // 生成临时的图片URL
  const imageUrl = URL.createObjectURL(imageBlob);
  
  // 方案1：直接触发下载保存图片
  const a = document.createElement('a');
  a.href = imageUrl;
  a.download = 'label.png';
  a.click();
  // 释放临时URL占用的内存
  URL.revokeObjectURL(imageUrl);

  // 方案2：如果要显示在页面上，就创建img元素插入body
  // const img = document.createElement('img');
  // img.src = imageUrl;
  // document.body.appendChild(img);
}

document.getElementById("generateLabelBtn").onclick = function() {
  requestLabel(test)
};

const test = `^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^FDIntershipping, Inc.^FS
^CF0,30
^FO220,115^FD1000 Shipping Lane^FS
^FO220,155^FDShelbyville TN 38102^FS
^FO220,195^FDUnited States (USA)^FS
^FO50,250^GB700,3,3^FS
^FX Second section with recipient address and permit information.
^CFA,30
^FO50,300^FDJohn Doe^FS
^FO50,340^FD100 Main Street^FS
^FO50,380^FDSpringfield TN 39021^FS
^FO50,420^FDUnited States (USA)^FS
^CFA,15
^FO600,300^GB150,150,3^FS
^FO638,340^FDPermit^FS
^FO638,390^FD123456^FS
^FO50,500^GB700,3,3^FS
^FX Third section with bar code.
^BY5,2,270
^FO100,550^BC^FD12345678^FS
^FX Fourth section (the two boxes on the bottom).
^FO50,900^GB700,250,3^FS
^FO400,900^GB3,250,3^FS
^CF0,40
^FO100,960^FDCtr. X34B-1^FS
^FO100,1010^FDREF1 F00B47^FS
^FO100,1060^FDREF2 BL4H8^FS
^CF0,190
^FO470,955^FDCA^FS
^XZ`

HTML部分（无需修改） #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline';"
    />
  </head>
  <body>
    <button id="generateLabelBtn">Generate Label</button>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Komakino_1251