Published By - Rajendra Nagar
In this blog, I will walk you through a practical approach to generating and downloading QR codes in a Vue 3 application using the qrcode.vue package. We will also leverage html2canvas to convert the QR code to an image format and trigger its download.
To begin, you need to install the necessary packages. Run the following commands to add qrcode.vue
and html2canvas
to your Vue 3 project:
npm install qrcode.vue html2canvas
We will use the qrcode.vue
package to generate the QR code dynamically based on your application's data.
<template>
<div id="canvas01{{ sessionLiveId }}">
<qrcode-vue
:value="qrValue"
:size="200"
></qrcode-vue>
</div>
</template>
<script>
import QrcodeVue from 'qrcode.vue';
export default {
components: { QrcodeVue },
props: {
qrValue: {
type: String,
required: true
},
sessionLiveId: {
type: String,
required: true
}
}
};
</script>
To allow users to download the generated QR code as a PNG file, we use html2canvas
to capture the QR code container and convert it into an image.
Here's the method to achieve this:
import Swal from 'sweetalert2';
import html2canvas from 'html2canvas';
export default {
methods: {
downloadQRCode(ci) {
// Show the SweetAlert loading spinner
Swal.fire({
title: `<p class='text-primary'>${this.$t('common-labels.downloading-title')}...</p>`,
allowEscapeKey: false,
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
}
});
setTimeout(() => {
const element = document.getElementById('canvas01' + ci?.session_live_id?.live_id);
if (!element) {
console.error('QR Code container not found!');
Swal.close();
return;
}
// Style adjustments for better image rendering
element.style.padding = '10px';
element.style.backgroundColor = '#ffffff';
element.style.display = 'inline-block';
html2canvas(element, {
scale: 1, // Set scale for better quality
useCORS: true, // Allow cross-origin resources
logging: false, // Suppress logs
width: 320,
height: 360
})
.then((canvas) => {
// Convert the canvas to an image and trigger download
const image = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = `${ci?.session_live_id?.live_id}.png`;
link.href = image;
link.click();
// Close the loading dialog and show success alert
Swal.close();
Swal.fire({
title: `<p class='text-primary'>${this.$t('common-labels.qr-code-downloaded')}</p>`
});
})
.catch((error) => {
console.error('Failed to capture the container:', error);
Swal.close();
});
}, 100);
}
}
};
Display a Loading Spinner: A SweetAlert dialog displays a loading spinner while the QR code is being prepared.
Capture the QR Code: The html2canvas
library captures the QR code's DOM element.
Convert and Download: The captured QR code is converted into a PNG image, and a download is triggered with a dynamically generated filename.
You can easily modify the padding, background color, image scale, and other configurations based on your requirements. The filename for the downloaded image can also be adjusted to include additional details.
This approach allows you to generate visually appealing QR codes and offers a seamless experience for users to download them. Integrating these steps into your Vue 3 project is straightforward and enhances your application's functionality.
Feel free to adapt this solution for your unique needs, and happy coding!