Estoy tratando de convertir una cadena ZPL en una imagen png a través de la API de labelary.com.
Puedo enviar una solicitud de búsqueda y recibir una respuesta. Sin embargo, cuando miro la pestaña de red en las herramientas de desarrollo de Chrome, puedo ver la imagen png en la pestaña "vista previa", pero la pestaña de respuesta está vacía, ¿cómo puedo guardar esa imagen png que puedo ver en la ventana de vista previa? ?
Aquí está mi código:
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>El problema es que está intentando imprimir la respuesta en la consola en lugar de agregar la imagen de respuesta en el cuerpo. Para obtener la imagen de la respuesta, debe convertirla a Blob y luego obtener la URL de la imagen. Para saber más sobre Blobs
En el código html, simplemente agregue un contenedor div donde desee mostrar su imagen
<div id="container"></div>Código 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`;