如何从标签 api 响应（javascript）中检索 png
Posted
技术标签:
【中文标题】如何从标签 api 响应（javascript）中检索 png【英文标题】：How to retrieve png from labelary api response ( javascript ) 【发布时间】：2022-01-08 15:15:50 【问题描述】：我正在尝试通过 labelary.com API 将 ZPL 字符串转换为 png 图像。
我能够发送获取请求并接收响应。但是，当我在 chrome 开发工具中查看网络选项卡时，我可以在“预览”选项卡中看到 png 图像，但响应选项卡是空的，我将如何保存我可以在预览窗口中看到的 png img ?
这是我的代码：
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',
headers:
'Content-Type': 'application/x-www-form-urlencoded',
,
body: JSON.stringify(zplString),
)
console.log(response);
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`<!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>【问题讨论】：
【参考方案1】：问题是您试图在控制台上打印响应，而不是在正文上附加响应图像。要从响应中获取图像，需要将其转换为 Blob，然后从中获取图像的 url。To know more about Blobs
在 html 代码中只需添加一个容器 div 来显示图像
<div id="container"></div>
JS 代码
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",
headers:
"Content-Type": "application/x-www-form-urlencoded",
,
body: JSON.stringify(zplString),
);
console.log(response);
const responseBlob = await response.blob();
const img = document.createElement('img');
img.src = URL.createObjectURL(responseBlob);
document.querySelector(`#container`).append(img);
generateLabelBtn.addEventListener("click", (e) =>
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`;
【讨论】：
非常感谢，这正是我所需要的，我知道与 blob 对象有关，但我无法弄清楚。 不客气@Komakino_1251以上是关于如何从标签 api 响应（javascript）中检索 png的主要内容，如果未能解决你的问题，请参考以下文章
YouTube API：如何使用标签 Y 从频道 X 获取视频？
Javascript fetch 无法从 GMail API Batch 请求中读取 Multipart 响应
javascript 从响应生成chartjs数据，作为密钥和数据，变成标签和数据