-
Goal: Create unique labels for bacteria text cards. I'm using a 3d party api to create QR codes stickers with numbers fetched from my table.
-
Steps: https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ generateQRCode.data }} returns me an image. And text below is {{ generateQRCode.data }} that returns string of the following format: 24-XXXXXX
-
I would expect print button to ether send the contents of the container to my zebra 2824 or worst case at least generate a PDF I could send to the printer. Any best practises on how to do it?
PS I just stumbled upon a native QR code generator.
1 Like
hey @Scottsky when you go to File > Print in your browser -- with the modal popup -- what does it look like?
Retool has a built-in resource for generating a PDF of the app, but it won't work for HTML/iFrame/custom components
This is what I see in File --> Print... modal.
Not exactly something that would fit my zebra 2824 label printer =)
with print a PDF resource I can't make it show an image of a generated qr code.
@Scottsky gotcha!
few ideas, assuming you have base64-encoded string as your image:
- copy the image to clipboard
- generate a PDF from the image data
- direct to Zebra using ZPL and a URL
clipboard (as an event handler to a button):
const base64Image = "your_base64_string_here";
const imageBlob = await fetch(`data:image/png;base64,${base64Image}`).then(res => res.blob());
const clipboardItem = new ClipboardItem({ "image/png": imageBlob });
navigator.clipboard.write([clipboardItem]).then(() => {
console.log('Image copied to clipboard.');
}).catch(err => {
console.error('Error copying image to clipboard: ', err);
});
PDF:
make Markdown content inside the PDF resource query, and this seems to work. may not work with the margins/padding on the resulting PDF
direct to Zebra (from chatGPT, never used one before):
// Convert base64 to ZPL (this is a simplified example, you might need more specific encoding)
const base64Image = "your_base64_string_here";
const zpl = `
^XA
^FO50,50^GFA,${base64Image.length},${base64Image.length},${base64Image}
^XZ
`;
// Send ZPL to the printer (Assuming you have an endpoint or mechanism)
fetch('http://your_printer_ip', {
method: 'POST',
headers: {
'Content-Type': 'text/plain'
},
body: zpl
}).then(response => {
console.log('Print command sent.');
}).catch(error => {
console.error('Error sending print command: ', error);
});
Thank you. An interesting idea to try.
However, I would have to try another qrcode generator.
Native generator does not have base64 of the generated code exposed anywhere. Unless I don't know where to look...
How would one get a base64 of an image of a qr code that's natively generated?
Can't see anything like base64 exposed in the status of the qr code module.
