Get QRCode for use in PDF

[dewolft]

there is a way for get generated QRCode and use it as image or object on TS side ?

i want to add this QRCode to a PDF.

[fortunella]

Did you manage to get the generated image out of the QR code? I'm facing the same problem and have no idea hot solve it. Unfortunately, I cannot get access to the nativeElement.

[dewolft]

no way... i change my approach and use it in HTML element, and after print the HTML element into PDF

[fortunella]

I got it working :-)

This is the solution that works for me:

1. I define a @ViewChild variable in my component: @ViewChild('qrcode') qrcode: QRCodeComponent;

2. I extract the base64 encoded image data out of the qrcode element:

let el: ElementRef = this.qrcode['elementRef'];
let html : string  = el.nativeElement.innerHTML;
let img64: string  = html.substr(0, html.length - 2).split('base64,')[1];

3. I create an A tag and click it to provide the "save as" dialog to the user:

let a      = document.createElement("a");
a.href     = 'data:application/octet-stream;base64,' + img64;
a.download = 'qrcode.png';
a.click();

[steelcorsy]

@fortunella method was so util for me changing:

@ViewChild('qrcode') qrcode: QRCodeComponent; by @ViewChild(QRCodeComponent) qrcode: QRCodeComponent;

<ion-item> <qr-code id="qrcode" [value]="testdataforqr" [size]="300"></qr-code> </ion-item>

[ghost]

@fortunella I am getting following error in my console: ERROR TypeError: Cannot read property 'elementRef' of undefined can you please share the complete code?

[steelcorsy]

@fortunella I am getting following error in my console: ERROR TypeError: Cannot read property 'elementRef' of undefined can you please share the complete code?

You are poiting to wrong object, how you are calling the method?

[steelcorsy]

Ok, I wrote 2 methods to do it

extractBase64ImageQr(qrcode : ViewChild):string{ let el: ElementRef = qrcode["elementRef"]; let html: string = el.nativeElement.innerHTML; let img64: string = html.substr(0, html.length - 2).split("base64,")[1]; img64 = "data:image/png;base64," + img64;

return img64;

}

extractBase64ImageQr2(qrComponent : HTMLElement):string{ let imgx : Element = qrComponent.firstElementChild; let img : string = imgx["src"]; let img64: string = img.substr(0, img.length - 2); return img64; } Use the second method by passing the HTML object directly as a parameter using document.getElementById("qrCodeId")

Let me know if it worked

[ghost]

@fortunella I am getting following error in my console: ERROR TypeError: Cannot read property 'elementRef' of undefined can you please share the complete code?

You are poiting to wrong object, how you are calling the method?

no i have figured it out actually i was using ngx-botstrap's service based modal and my qr-code was inside ng-template that's why it not available via viewChild.

[ghost]

ok so i have got it working but it is giving me a small image of QRcode only. Is there any way to capture the complete ngx-botstrap's modal or html around the QRCode and save as image ?

[steelcorsy]

I don’t found any library for do that, but I got it displaying base64 extracted as hidden image (if do you don’t want show it) so the image is manipulable. If do you want a bigger size play with qr size attribute, so if your QR data is long you will see a white square border making small your black qr visible data.