我正在嘗試通過 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>問題是您試圖在控制台上打印響應，而不是在正文上附加響應圖像。要從響應中獲取圖像，您需要將其轉換為 Blob，然後從中獲取圖像的 url。了解更多關於 Blob
在 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`;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句