纯前端实现二维码生成(原生/vue方法)（超简单）

这篇具有很好参考价值的文章主要介绍了纯前端实现二维码生成(原生/vue方法)（超简单）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

我们借用了qrcode.js插件，这个插件可以帮助我们生成二维码，超简单超好用

下面是我生成了一个主页的二维码，大家可以扫码查看效果

vue生成二维码到前端,前端,vue.js,javascript,node.js,开发语言,uni-app,json

插件引入

1.本地文件引入

本地引入依赖包地址：下载地址

1.首先引入插件，这里我是script标签引入的，如果用vue直接全局引入即可

<script type="text/javascript" src="/js/qrcodejs-master/qrcode.js"></script>

2.npm方式引入

2.1控制台输入指令

npm install --save qrcodejs2-fix

2.2vue中引入

import QRCode from 'qrcodejs2-fix'

操作步骤

1.准备一个存放二维码的盒子

原生中使用ID绑定，VUE中使用ref绑定

<div id="qrCodeUrl"></div> //html中使用ID绑定

<div ref="qrcode"> //vue中只需要绑定一个ref值即可
 
</div>

2.js调用并且存放内容

这里是先把盒子为空了，然后再去调用方法生成二维码 text就是你的二维码内容：可以是一段文字，也可以是一个连接，这里我用的是连接，扫码后直接跳转

下面分别是原生和vue的调用方式文章来源地址https://www.toymoban.com/news/detail-855349.html

// html js    
document.getElementById("qrCodeUrl").innerHTML = "";
    let qrCodeUrl = new QRCode("qrCodeUrl", {
        width: 200,
        height: 200,
        text: this.originUrl, //二维码内容，可以是一个连接或者单纯的一段文字
    });

// vue
new QRCode(this.$refs.qrcode, {
    text: qrCodeUrl,   //URL地址
    width: 300,
    height: 300,
    colorDark: '#000',    //二维码颜色
    colorLight: "#ffffff"  //背景颜色
});

到了这里，关于纯前端实现二维码生成(原生/vue方法)（超简单）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！