Creating and Downloading QR Codes in a Vue 3 Application

Setting Up the Project

Step 1: Install Dependencies

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

Step 2: Implementing the QR Code

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>

Downloading the QR Code as an Image

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);
}
}
};

Explanation

1. Display a Loading Spinner: A SweetAlert dialog displays a loading spinner while the QR code is being prepared.

2. Capture the QR Code: The html2canvas library captures the QR code's DOM element.

3. Convert and Download: The captured QR code is converted into a PNG image, and a download is triggered with a dynamically generated filename.

Customizations

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.

Final Thoughts

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!