详解Vue实现链接生成二维码并支持下载
作者：小白Coding日志
在现代 Web 应用中,快速分享链接是一项常见需求,二维码作为一种简洁的分享方式,受到了广泛欢迎,所以本文将介绍如何使用 Vue 纯前端技术实现动态生成链接二维码的方法,需要的可以参考下
在现代 Web 应用中，快速分享链接是一项常见需求。二维码作为一种简洁的分享方式，受到了广泛欢迎。如何在 Vue.js 中实现前端生成链接二维码的功能，成为了许多开发者关注的焦点。本文将介绍如何使用 Vue 纯前端技术实现动态生成链接二维码的方法，无需后端参与。
本项目基于Vite+Vue3，这里假设你已经搭建好项目了前端页面使用el-input+el-popover来实现
为了在应用程序中实现链接生成二维码的功能，我们需要依赖一个npm 包qrcode.vue。这个包提供了一个简单而强大的方法，让我们能够轻松地在 Vue.js 应用程序中生成二维码，无需编写冗长复杂的代码，极大地简化了开发流程，提高了开发效率。
具体属性配置可以查看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>前端实现链接生成二维码</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()
}
}
下载的二维码
以上所述即是如何在前端实现二维码生成以及支持下载的完整方案。
到此这篇关于详解Vue实现链接生成二维码并支持下载的文章就介绍到这了,更多相关Vue链接生成二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！