Print contents of a container on printer or to pdf

💬 App Building
1

  • 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
2

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

3

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.

Screen Shot 2024-09-01 at 8.03.03 PM
Screen Shot 2024-09-01 at 8.03.03 PM1920×1158 65.4 KB

4

@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

image
image1920×987 138 KB

![QR Code](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIAQAAAACFI5MzAAABGUlEQVR42u2YSw7DIAxEzYpjcFM+N+UYrErtMUkjpd2WWQQlyudtLI89JpH5a8lDHvJnUkVXmkMPKcMeAg1peo70inrpRbm/ISFDwkhNX4NUSWxEo26WVFKisgc2ArWncSO3OthJvEs0nTju/bOT+NJKzJK++c5OovJWRIob2AwNsf6YXWJ3eFGbgXS4skgEGafaDGSifVONS/ZCQ/Q2YI5l8BdSS0ImwtTezehjiM9C3FG8fbVdykft/URTeEY918hlIZZFC9Yq0Rw6ns63nyxXtkTCYK6VuJv4NKvmMdgFMBHfBbRjb8JFxgoWW04RPmKfEaY2pgcZcT/OsL3GQ5baFrUN23iZZrvJ6pKjDJFXFvL8P3jIfvIGvNX7jsCaJvEAAAAASUVORK5CYII=)

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);
});
5

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...

6

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.

7

Posted a solution I ended up using here, if you are curious:

2 Likes
8

awesome @Scottsky ! sorry i didn't reply yesterday -- been busy!

1 Like
9

No sweat, mate. In my projects, you sent me down a beautiful rabbit hole of base64. Kudos!

1 Like