詳解Vue實現(xiàn)鏈接生成二維碼并支持下載

更新時間：2024年03月05日 10:14:16 作者：小白Coding日志

在現(xiàn)代 Web 應用中,快速分享鏈接是一項常見需求,二維碼作為一種簡潔的分享方式,受到了廣泛歡迎,所以本文將介紹如何使用 Vue 純前端技術實現(xiàn)動態(tài)生成鏈接二維碼的方法,需要的可以參考下

在現(xiàn)代 Web 應用中，快速分享鏈接是一項常見需求。二維碼作為一種簡潔的分享方式，受到了廣泛歡迎。如何在 Vue.js 中實現(xiàn)前端生成鏈接二維碼的功能，成為了許多開發(fā)者關注的焦點。本文將介紹如何使用 Vue 純前端技術實現(xiàn)動態(tài)生成鏈接二維碼的方法，無需后端參與。

本項目基于Vite+Vue3，這里假設你已經搭建好項目了前端頁面使用el-input+el-popover來實現(xiàn)

為了在應用程序中實現(xiàn)鏈接生成二維碼的功能，我們需要依賴一個npm 包qrcode.vue。這個包提供了一個簡單而強大的方法，讓我們能夠輕松地在 Vue.js 應用程序中生成二維碼，無需編寫冗長復雜的代碼，極大地簡化了開發(fā)流程，提高了開發(fā)效率。

具體屬性配置可以查看qrcode.vue官方文檔：github.com/scopewu/qrcode.vue

安裝

npm install --save qrcode.vue

在需要使用的文件中引入qrcode

<script setup>
import QrcodeVue from 'qrcode.vue'
const level = ref('M')
const renderAs = ref('svg')
import { ref } from 'vue'
const link = ref('https://www.mi.com/')
const onQRCode = () =>{}
</script>

<template>
  <h1>前端實現(xiàn)鏈接生成二維碼</h1>
  <el-input v-model="link" placeholder="Please input" style="width: 400px;">
      <template #append>
        <el-popover
        placement="bottom"
        :width="160"
        trigger="click"
      >
        <template #reference>
          <div class="qrcode">二維碼</div>
        </template>
        <template #default>
          <div class="code-container">
            <div class="title">掃描二維碼，分享此鏈接</div>
            <qrcode-vue id="svgRef" :value="link" :size="120" :level="level" :render-as="renderAs" />
            <el-button icon="sc-icon-ImportsIcon" style="width: 120px;margin-top: 10px;" class="m-t10" size="small" @click="downloadQrCode">下載</el-button>
          </div>
        </template>
      </el-popover>
      </template>
  </el-input>
</template>

<style scoped>
.code-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.qrcode {
  cursor: pointer;
}
.title {
  font-size: 12px;
  color: #8e939c;
  margin-bottom: 5px;
}
</style>

效果如下

下載二維碼代碼實現(xiàn)

/* 下載二維碼 */
const downloadQrCode = () =>{
    const node = document.getElementById('svgRef')
    covertSVG2Image(node, '掃描二維碼，分享此鏈接', 120, 120)
};
/**
 * 將svg導出成圖片
 * @param node svg節(jié)點 => document.querySelector('svg')
 * @param name 生成的圖片名稱
 * @param width 生成的圖片寬度
 * @param height 生成的圖片高度
 * @param type 生成的圖片類型
 */
const covertSVG2Image = (node, name, width, height, type = 'png') => {
  let serializer = new XMLSerializer()
  let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node)
  let image = new Image()
  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
  let canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height
  let context = canvas.getContext('2d')
  context.fillStyle = '#fff'
  context.fillRect(0, 0, 10000, 10000)
  image.onload = function () {
    context.drawImage(image, 0, 0)
    let a = document.createElement('a')
    a.download = `${name}.${type}`
    a.href = canvas.toDataURL(`image/${type}`)
    a.click()
  }
}

下載的二維碼