J'utilise le plugin "vue-qrcode" pour générer des codes QR permettant aux utilisateurs de générer des codes QR pour leurs liens de profil public afin qu'ils puissent les partager sur leurs cartes de visite.
Maintenant, l'idée est de donner à l'utilisateur la possibilité de télécharger le code QR via un bouton et de copier le code QR dans le presse-papier via un autre bouton pour faciliter l'envoi par mail (notamment pour les utilisateurs de smartphones).
Le problème est le suivant : je ne sais pas comment télécharger ou copier le code QR. Est-ce que quelqu'un sait comment copier ou télécharger le code QR ? Actuellement, j'utilise "vue-clipboard2" pour copier des liens, etc. mais je n'arrive pas à copier des images.
J'utilise le code suivant pour afficher le code QR sur notre site internet :
<template>
<qrcode-vue
style = "cursor: pointer;"
:value = "linkToProfile"
size = 160
level = "M"
:background = "backgroundcolor_qrcode"
:foreground = "color_qrcode"
></qrcode-vue>
</template>
<script>
import Vue from 'vue'
import QrcodeVue from 'qrcode.vue'
Vue.component('qrcode-vue', QrcodeVue )
export default {
data: () => ({
linkToProfile: "http://www.example.com/johnDoe",
})
</script>
Merci - Chrétien
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai trouvé une solution. La solution est la suivante :
Zone du modèle :
<qrcode-vue id="qrblock" :value = "linkToSki" size = 220 level = "M" ref="qrcode" ></qrcode-vue>Domaine fonctionnel :
// -- 复制/下载二维码的功能区域 - 结束 --- function selectText(element) { if (document.body.createTextRange) { const range = document.body.createTextRange(); range.moveToElementText(element); range.select(); } else if (window.getSelection) { const selection = window.getSelection(); const range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.addRange(range); } } function copyBlobToClipboardFirefox(href) { const img = document.createElement('img'); img.src = href; const div = document.createElement('div'); div.contentEditable = true; div.appendChild(img); document.body.appendChild(div); selectText(div); const done = document.execCommand('Copy'); document.body.removeChild(div); return done; } function copyBlobToClipboard(blob) { // eslint-disable-next-line no-undef const clipboardItemInput = new ClipboardItem({ 'image/png' : blob }); return navigator.clipboard .write([clipboardItemInput]) .then(() => true) .catch(() => false); } function downloadLink(name, href) { const a = document.createElement('a'); a.download = name; a.href = href; document.body.append(); a.click(); a.remove(); } // -- 复制/下载二维码的功能区域 - 结束 ---