Skip to main content

I created a QR Code Using LWC. It is working well when I show the QR Code in Html page.

Now I want to show that qr code which is generated via LWC in custom field (It can be formula or Rich text area)

How to achieve this.

 

LWC Code :

------------------------------------

 

import { LightningElement,api } from 'lwc';import qrcode from './qrcode.js'; import getDetails from '@salesforce/apex/qrCodeGeneratorController.getDetails';export default class QrCodeGenerator extends LightningElement {    @api recordId;    dataRetrived = false;    eventdata;    renderedCallback() {            getDetails({recordId : this.recordId})                .then(result => {                    console.log(result);                    this.eventdata = result;                    console.log('dr', this.eventdata);                    this.dataRetrived = true;                    let strData = JSON.stringify('Name: ' + result.Full_Name__c + ', Email: ' + result.Preferred_Email__c);                    const qrCodeGenerated = new qrcode(0, 'H');                    qrCodeGenerated.addData(strData);                    qrCodeGenerated.make();                    let element = this.template.querySelector(".qrcode");                    element.innerHTML = qrCodeGenerated.createSvgTag({});                })            .catch(error => {                console.log(error);            });    }}

--------------------------

qrcode.js (I refered this to create a QR Code) :

https://github.com/shivanirathi21/LWC-QRCode/blob/master/qrcode.js

 

when I logged the QR code, I got this value in this format:-

 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 106 106"  preserveAspectRatio="xMinYMin meet"><rect width="100%" height="100%" fill="white" x="0" y="0"/><rect width="2" height="2" x="8" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="10" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="12" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="14" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="16" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="18" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="20" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="26" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="28" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="30" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="32" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="34" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="36" y="8" fill="black" shape-rendering="crispEdges"  /><rect width="2" height="2" x="40" y="8" fill="black" shape-rendering="crispEdges"  /></svg>

I really appreciate any help you can provide.

0/9000