Can't print dynamically generated images

ERPNext
1

Hi. I need to display QR code in sales invoice and also show it in print invoice.
Current flawed solution: Right now, I fetch an encoded string from server side. On the client side, I have a QR image HTML field.

image
image920×42 2.64 KB

Then in js, I use a js library ‘QRious’ to render HTML into that field and the QR code is displayed.
However, when trying to print the invoice, the QR code does not appear and I cannot figure out how to hook into the print page to render the image there.
My question is:
Can I do this in a way that ERPNext will save the rendered image without me having to regenerate it every time from encoded string.
If not, how do I hook into the print page to manually render the QR code over there. (encoded string is available on print page)

2

Hi there,

PDF generation is done on the server by a library called wkhtmltopdf, which doesn’t handle JavaScript. You have a few different options.

In my case, I only wanted the qrcode on print formats (not forms), so I rendered the image server-side and passed it over as a base64 encoded bitmap.

Alternately, if you wanted to do it client side, you could render the image remotely and store the result in a file field.

3

Make a custom print format

I wanted a printable QR code to put on items showing QR Code, Item Code, SN

<style>
  .print-format {
    padding: 0px;
  }

  @media screen {
    .print-format {
      padding: 0in;
    }
  }

</style>
<div style="position: relative; top:0.25cm">
  <div style="width:6.35cm;height:3.81cm;">
    <img alt='' src='https://barcode.tec-it.com/barcode.ashx?data={{ doc.item_name }} SN%3A%20{{ doc.name }}&code=QRCode&translate-esc=on' />
    <br>
    Item:{{ doc.item_code  }}<br>
    SN:{{ doc.serial_no  }}<br><br>
  </div>
1 Like
4

Thanks for the help. This is what I was looking for.