Search code examples
javascriptpythonerpnextfrappe

Unable to return an image from python django (frappe framework) server and display in js doctype

I am working on FrappeFramework 'ERPNext' customization.

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 as such:

HTML Field screenshot

Then in js, I use a js library ‘QRious’ to render HTML into that field and the QR code is displayed.

function generateQRCode(base64) {
  var qr = new QRious({
    element: document.getElementById("qr_code"),
    size: 200,
    value: "",
  });
  var qrtext = base64;
  qr.set({
    foreground: "black",
    size: 200,
    value: qrtext,
    mime: 'image/png'
  });
}

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)

P.S. I can also fetch an rgb/gray array if that helps.

Solution

  • I was able to solve this problem by making a custom print format in "Print Format List" doctype.

    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  }}
  </div>
</div>