vue 生成 二维码 qrCode 插件 使用 方法
首先安装方法:(--save 参数会改变package.json 推荐使用 下次直接install就行了)
npm install --save qrcode
然后项目使用:
import QRCode from 'qrcode'
然后使用方法:
html 使用 -
<!-- 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.异步方式
import QRCode from 'qrcode' // With promises
QRCode.toDataURL('二维码内容xxxxxx!') .then(url => { console.log(url) }) .catch(err => { console.error(err) })
2.同步方式
// With async/await
let text = 'xxxxxxxx'; const generateQR = async text => {
try {
console.log(await QRCode.toDataURL(text))
} catch (err) {
console.error(err)
}
}
vue 生成 二维码 qrCode 插件 使用 方法的更多相关文章
- VUE 生成二维码插件
原文:https://www.jianshu.com/p/496fd1cbee8d npm install qrcodejs2 --save 页面中引入 dom 结构 JS 方法编写 export d ...
- js生成二维码 qrcode
js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...
- Java生成二维码QRCode.jar
所需jar包:QRCode.jar:http://download.csdn.net/detail/xuxu198899223/7717745 package ewm; import java.awt ...
- php生成二维码的插件phpqrcode
参考网址: http://www.thinkphp.cn/topic/7749.html http://blog.csdn.net/stxyc/article/details/44650971 php ...
- VUE 生成二维码(qrcodejs)
1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...
- 【C#/WPF】.Net生成二维码QRCode的工具
先马 http://qrcodenet.codeplex.com/ 使用该工具WPF生成二维码的简单例子: 前台XAML准备一个Image控件显示二维码. string qrcodeStr = &qu ...
- vue 生成二维码+截图
链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...
- 微信支付支付宝支付生成二维码的方法(php生成二维码的三种方法)
如果图简单,可以用在线生成 http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://www.xinzhenkj.com 最简单 ...
- 使用PHP生成二维码的两种方法(带logo图像)
一.利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
随机推荐
- C# 通过URL得到图片的问题
第一个方法在读取某些图片会报错 public static Image get_Fill_image(string url) { var image = new Image(); image.Sour ...
- Android——<uses-sdk>
语法(SYNTAX): <uses-sdk android:minSdkVersion="integer" android:targetSdkVersion="in ...
- JSP页面中验证码的调用方法
步骤: 1.首先是要生成验证码 2.对验证码类进行调用:主要 实现的是 将验证码图片 输出到response.getOutputStream()这个输出流中 调用时,可以在页面调用,也可以在serv ...
- babel 7.x 结合 webpack 4.x 配置
今天在学习webpack的使用的时候,由于学习的教程是2018年初的,使用的是 webpack 3.x 和 babel 6.x ,然后学习的过程中出现的了很多问题. 解决问题之后,总结一下新的 bab ...
- 如何在Liferay 7中用html显示页面
liferay portlet默认的显示页面是view.jsp,虽然可以在jsp中用include标签包括html文件,但是如何直接通过修改配置文件让默认的显示页面为view.html呢? 1.用Li ...
- PLAY2.6-SCALA(十一) 模板常用场景
1.布局 声明一个views/main.scala.html模板作为主布局模板 @(title: String)(content: Html) <!DOCTYPE html> <ht ...
- 如何用SPSS分析学业情绪量表数据
如何用SPSS分析学业情绪量表数据 1.数据检验.由于问卷.量表的题目是主观判断和选择,因而难免有些人不认真填,所以,筛选出有效.高质量的数据非常关键.通常需要作如下检查:(1)是否有人回答互相矛盾, ...
- Directx11教程(45) alpha blend(2)
原文:Directx11教程(45) alpha blend(2) 在myTutorialD3D11_40中,我们在场景中再添加一个box,并把box放在水里,实现半透明的效果.如下图所示: ...
- linux 查看并关闭窗口
查看端口 ps -ef | grep tomcat 关闭端口 kill -9 端口号
- 安装LoadRunner11时,缺少vc2005_sp1_with_atl_fix_redist错误的解决方案
安装LoadRunner11时,会报缺少vc2005_sp1_with_atl_fix_redist错误,类似下图所示: 由提示信息可知,这里是由于本机缺少该组件所致,解决方案就是安装此组件,可以去网 ...