qrcode 将链接生成二维码

最新推荐文章于 2025-07-03 08:42:49 发布

weixin_33817333

最新推荐文章于 2025-07-03 08:42:49 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签：数据库 php javascript ViewUI

原文链接：https://segmentfault.com/a/1190000011191023

本文介绍如何在Vue项目中利用qrcode库将链接转换为二维码。通过安装qrcode并使用toCanvas方法，可以轻松地在网页上生成二维码。

Vue项目中遇到一个将链接转化为二维码的情景。
搜了一下，qrcode可以满足需要。
github地址:
https://github.com/soldair/no...

安装：

npm install --save qrcode

Demo代码如下：

<template>
  <div class="home-container">
    <div class="banner-box">
      <canvas id="qrccode-canvas"></canvas>
    </div>
    <div class="btn-wrap">
      <textarea type="textarea" v-model="bannerUrl" placeholder="输入链接"></textarea>
      <button @click="createQrc">点击生成二维码</button>
    </div>
  </div>
</template>

<script>
var QRCode = require('qrcode')
var canvas = ''
export default {
  data () {
    return {
      bannerUrl: ''
    }
  },
  methods: {
    createQrc: function () {
      if (!this.bannerUrl) {
        window.alert('链接不能为空')
        return false
      }
      QRCode.toCanvas(canvas, this.bannerUrl, (error) => {
        if (error) {
          console.log(error)
        } else {
          console.log('success')
        }
      })
    }
  },
  mounted () {
    this.$nextTick(function () {
      // DOM操作
      canvas = document.getElementById('qrccode-canvas')
    })
  }
}
</script>
<style>
.btn-wrap {
  width: 260px;
  height: 260px;
  margin: 0 auto;
}
.btn-wrap textarea{
  width: 260px;
  height: 260px;
}
</style>

运行结果如下图：

图片描述