Vue纯前端实现链接生成二维码并支持下载

news2025/2/23 17:39:52

你好，我是小白Coding日志，一个热爱技术的程序员。在这里，我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客，一起在技术的世界里探索前行吧！
在现代 Web 应用中，快速分享链接是一项常见需求。二维码作为一种简洁的分享方式，受到了广泛欢迎。如何在 Vue.js 中实现前端生成链接二维码的功能，成为了许多开发者关注的焦点。本文将介绍如何使用 Vue 纯前端技术实现动态生成链接二维码的方法，无需后端参与。

本项目基于Vite+Vue3，这里假设你已经搭建好项目了😀前端页面使用el-input+el-popover来实现

为了在应用程序中实现链接生成二维码的功能，我们需要依赖一个npm 包qrcode.vue。这个包提供了一个简单而强大的方法，让我们能够轻松地在 Vue.js 应用程序中生成二维码，无需编写冗长复杂的代码，极大地简化了开发流程，提高了开发效率。

具体属性配置可以查看qrcode.vue官方文档：https://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>前端实现链接生成二维码</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>

效果如下👇

下载二维码代码实现

/* 下载二维码 */
const downloadQrCode = () =>{
    const node = document.getElementById('svgRef')
    covertSVG2Image(node, '扫描二维码，分享此链接', 120, 120)
};
/**
 * 将svg导出成图片
 * @param node svg节点 => 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()
  }
}

下载的二维码

以上所述即是如何在前端实现二维码生成以及支持下载的完整方案。 ✔️
最后还是那句话：即使代码逻辑很简单，也值得记录下来。我的编程目标是避免重复造轮子！😊
如果觉得有用，就给我点个赞吧😁
探索更多有趣知识，欢迎关注我的微信公众号！每天分享精彩内容，与你一同探寻知识的边界。扫码即可订阅，一起开启知识新旅程！🚀📚
关注我的技术博客，探索前沿科技与实用开发技巧。一起携手走向代码的精彩世界！🚀💻 不错过每一篇精彩！