快捷導(dǎo)航

Vue使用QrcodeVue生成二維碼并下載的示例代碼

更新時(shí)間：2023年08月03日 10:09:05 作者：A_ugust__

這篇文章主要給大家介紹了Vue使用QrcodeVue生成二維碼并下載的示例,文章中有詳細(xì)的代碼示例供大家參考,感興趣的小伙伴可以參考閱讀下

生成二維碼

1、安裝qrcode.vue組件

npm install --save qrcode.vue

<template>
  <div id="app">
   <qrcode-vue :value='value' :size='size'></qrcode-vue><br />
  </div>
</template>
<script>
//導(dǎo)入組件
import QrcodeVue from 'qrcode.vue'
export default {
  name: 'App',
  data() {
    return {
      value: '掃我！', //二維碼內(nèi)容
      size: 300, //二維碼大小
    }
  },
  //導(dǎo)入組件
  components: {
    QrcodeVue,
  },
}
</script>

下載二維碼

使用a標(biāo)簽的download實(shí)現(xiàn)下載功能。

<template>
  <div id="app">
   <qrcode-vue :value='value' :size='size'></qrcode-vue><br />
   <button v-on:click="download()" id="download">下載</button>
  </div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
export default {
  name: 'App',
  data() {
    return {
      value: '別掃我！',
      size: 300,
    }
  },
  components: {
    QrcodeVue,
  },
  methods: {
    download() {
      //獲取canvas標(biāo)簽
      let canvas = document.getElementById('app').getElementsByTagName('canvas')
      //創(chuàng)建a標(biāo)簽
      let a = document.createElement('a')
      //獲取二維碼的url并賦值為a.href
      a.href = canvas[0].toDataURL('img/png')
      //設(shè)置下載文件的名字
      a.download = '二維碼'
      //點(diǎn)擊事件，相當(dāng)于下載
      a.click()
      //提示信息
      this.$message.warn('下載中，請稍后...')
    },
  },
}
</script>

到此這篇關(guān)于Vue使用QrcodeVue生成二維碼并下載的示例代碼的文章就介紹到這了,更多相關(guān)Vue QrcodeVue生成二維碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue3實(shí)現(xiàn)鼠標(biāo)右鍵顯示菜單,點(diǎn)擊其他地方消失問題
這篇文章主要介紹了vue3實(shí)現(xiàn)鼠標(biāo)右鍵顯示菜單,點(diǎn)擊其他地方消失問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
vue發(fā)送ajax請求詳解
如何利用vue進(jìn)行AJAX,其它vue本身不支持發(fā)送AJAX請求,需要使用vue-resource（vue1.0版本）或axios（vue2.0版本）第三方插件的支持才行
2018-10-10
vue渲染時(shí)閃爍{{}}的問題及解決方法
v-if和v-show可能是日常開發(fā)中最常用的兩個(gè)指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區(qū)別的。接下來通過本文給大家分享vue渲染時(shí)閃爍{{}}的問題及解決方法，感興趣的朋友一起看看吧
2018-03-03
vue 面包屑導(dǎo)航組件封裝
本文主要介紹了vue 面包屑導(dǎo)航組件封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
Vue3格式化Volar報(bào)錯(cuò)的原因分析與解決
Volar 與vetur相同,volar是一個(gè)針對vue的vscode插件,下面這篇文章主要給大家介紹了關(guān)于Vue3格式化Volar報(bào)錯(cuò)的原因分析與解決方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
vue.js如何在網(wǎng)頁中實(shí)現(xiàn)一個(gè)金屬拋光質(zhì)感的按鈕
這篇文章主要給大家介紹了關(guān)于vue.js如何在網(wǎng)頁中實(shí)現(xiàn)一個(gè)金屬拋光質(zhì)感的按鈕的相關(guān)資料,文中給出了詳細(xì)的實(shí)例代碼以及圖文將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
Vue3之getCurrentInstance與ts結(jié)合使用的方式
這篇文章主要介紹了Vue3之getCurrentInstance與ts結(jié)合使用的方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue父子組件的嵌套的示例代碼
本篇文章主要介紹了vue父子組件的嵌套的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
Vue3?$emit用法指南(含選項(xiàng)API、組合API及?setup?語法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結(jié)構(gòu)中，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-07-07
利用Vue2.x開發(fā)實(shí)現(xiàn)JSON樹的方法
這篇文章主要給大家介紹了關(guān)于利用Vue2.x開發(fā)實(shí)現(xiàn)JSON樹的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01