I am trying to convert a ZPL string to a png image through the labelary.com API.
I am able to send a fetch request and receive a response. However when I look at the network tab in chrome dev tools, I can see the png image in the "preview" tab, but the response tab is empty, how would I go about saving that png img that I can see in the preview window?
Here is my code:
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>The issue is that you are trying to print the response on the console rather that appending the response image on the body. To get the image from the response you need to convert it to Blob, and then obtain the url of the image from it.To know more about Blobs
In the html code just add a container div where you want to display your image
<div id="container"></div>
JS Code
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`;