VUE怎么將網址轉化為二維碼并下載

本篇內容介紹了“VUE怎么將網址轉化為二維碼并下載”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1、安裝

npm install qrcodejs2 --save

2、在頁面中引入

import QRCode from 'qrcodejs2'

export default {

  components: { QRCode },

 }

3、頁面使用

  <div class="ercode">

        <div class="bookcode" id="qrcode" ref="qrcode1"></div>

        <el-button @click="download" style="margin-top: 10px;">下載

        </el-button>

</div>

4、生成二維碼

    qrcode （） {

      let qrcode = new QRCode（'qrcode', {

        width: 220, //圖像寬度

        height: 220, //圖像高度

        colorDark: '#000000', //前景色

        colorLight: '#ffffff', //背景色

        typeNumber: 4,

        correctLevel: QRCode.CorrectLevel.H

      }）;

      qrcode.clear（）; //清除二維碼

      qrcode.makeCode（'需要轉化的網址'）;

    },

5、下載圖片

    download（） {

      var qrcode = document.getElementById（"qrcode"）;

      var img = qrcode.lastChild  // 獲取img的dom節點

      const a = document.createElement（'a'） // 創建a標簽

      a.href = img.src 

      a.setAttribute（'download', '二維碼'） // 設置下載屬性

      a.click（）

    },

“VUE怎么將網址轉化為二維碼并下載”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！