How to add QR code image in Odoo's POS receipt

Question

I'm trying to add a QR image to the POS's receipt. The code I used in a normal invoice that worked was the following one:

<img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s'%('QR', o.qr_code_string, 150, 150)"/>

For the receipt, I exported for printing my string as receipt.qr_string and added the following line to the receipt's inheriting XML file:

<img t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s'%('QR', receipt.qr_string, 150, 150)"/>

But the image appear like a broken link. How do I achieve this?

Chavada Viki · Accepted Answer · 2020-04-25T17:11:00.433

I don't know why it is not working for POS receipts but let me tell you that POS is the system that can be run without connection to the server. Everything it executes should always using js i mean always to client side. So, my solution is to use QRrcode.js library as it is easy avaialable here.

Add this library file to the module on path /<your_module/static/src/lib/ folder and also to your pos backend like below and that file needs to added in the manifest as well under the "data" file list.

<odoo>
    <data>
        <template id="assets" inherit_id="point_of_sale.assets">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/<module_name>/static/src/lib/qrcode.js"></script>
            </xpath>
        </template>
    </data>
</odoo>

Take care of path properly.

Then you can use that library in any POS Receipt Qweb like below to print QRcode.

<div t-attf-id="#{receipt.qr_string}"></div>
    <script type="text/javascript">
        var lot_name = "<t t-esc="receipt.qr_string"/>";
        var qrcode = new QRCode(receipt.qr_string , {
            text: "http://jindo.dev.naver.com/collie",
            width: 100,
            height: 100,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
        qrcode.makeCode(receipt.qr_string);
    </script>

Thank you @Chavada Viki, it works perfectly.I have one more doubt about this solution, how can I change the QR's alignment? It stays in the left side of the receipt even when I use content-align or text-align. — Simon Capriles, Apr 27 '20 at 02:33
@SimonCapriles That is totally a css mods. i don't know what the current design of the receipt and other mods. but yes you can use this classes and css only on POS Receipt which is printing on the screen. and for the receipt which is coming out of the POS Receipt printe can not use css or classes. i mean both templates are different. — Chavada Viki, Apr 27 '20 at 07:57

score 0 · Answer 2 · answered Apr 19 '23 at 03:28

With Odoo 16, there is no need for external libraries; the tools are already included in the framework:

Javascript:

const codeWriter = new window.ZXing.BrowserQRCodeSvgWriter();
const address = `https://felpub.c.sat.gob.gt/verificador-web/publico/vistas/verificacionDte.jsf?tipo=autorizacion&numero=${numero_autorizacion}`
let qr_code_svg = new XMLSerializer().serializeToString(codeWriter.write(address, 150, 150));
const _qr = 'data:image/svg+xml;base64,' + window.btoa(qr_code_svg);
receipt.qrCode = _qr;

Qweb:

<div id="qrcode">
    <img style="width:200px;height:200px" t-att-src="receipt.qrCode" alt="svgCode"/>
</div>

How to add QR code image in Odoo's POS receipt

2 Answers2

Linked