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.
Write an answer...
0/9000