vue 生成二維碼 qrCode 插件使用方法

時間 2020-08-13

原文原文鏈接

首先安裝方法：（--save 參數會改變package.json 推薦使用下次直接install就好了）html

npm install --save qrcode

而後項目使用：shell

import QRCode from 'qrcode'

而後使用方法：npm

html 使用 - json

<!-- index.html -->
<html>
  <body>
    <canvas id="canvas"></canvas>
    <script src="bundle.js"></script> 
  </body>
</html>

// index.js -> bundle.js
var QRCode = require('qrcode') var canvas = document.getElementById('canvas') QRCode.toCanvas(canvas, '二維碼內容xxxxxx', function (error) { if (error) console.error(error) console.log('success!'); })

NodeJS

var QRCode = require('qrcode') QRCode.toDataURL('二維碼內容xxxxxx!', function (err, url) { console.log(url) })

ES6/ES7

1.異步方式canvas

import QRCode from 'qrcode'
 
// With promises
QRCode.toDataURL('二維碼內容xxxxxx!') .then(url => { console.log(url) }) .catch(err => { console.error(err) })

2.同步方式promise

// With async/await

let text = 'xxxxxxxx'; const generateQR = async text => { try { console.log(await QRCode.toDataURL(text)) } catch (err) { console.error(err) } }

相關標籤/搜索

vue 生成 二維碼 qrCode 插件 使用 方法

NodeJS

ES6/ES7

vue 生成二維碼 qrCode 插件使用方法