QRCode.js生成二维码

使用npm安装与生成二维码指南

原创已于 2022-03-14 20:43:48 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #npm

于 2022-03-14 20:25:15 首次发布

vue 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何通过npm安装`qrcode`库，并在ES6/ES7环境中使用该库生成二维码。提供了两种安装方式：局部安装和全局安装。在生成二维码的示例中，展示了如何利用`toDataURL`方法将文本转换为二维码图片数据URL，并将其赋值给`img`标签显示。此外，还展示了如何在Vue.js组件中使用该库，并提供了错误处理的示例。

一、安装
项目文件夹中执行

npm install --save qrcode
或者，全局安装

npm install -g qrcode

在ES6/ES7中使用

import QRCode from 'qrcode' 
// import引入可能会导致报错，可以尝试require
// const QRCode = require('qrcode');
 
// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })
 
// With async/await
const generateQR = async text => {
  try {
    console.log(await QRCode.toDataURL(text))
  } catch (err) {
    console.error(err)
  }
}

使用

<img :src="erCodeImg"/>


data(){
return {
erCodeImg:""
}
}

createdFun(){
let url = "https://www.baidu.com/",
let opts={
margin:0
}
QRCode.toDataURL(url,opts)
  .then(url => {
    console.log(url)
    this.erCodeImg = url
  })
  .catch(err => {
    console.error(err)
  })
}