基本上应用
插件安裝
cnpm install qrcodejs2 --save
// 或是
npm install qrcodejs2 --save
插件导进
应用commonjs或是es6模块方法
import QRCode from \'qrcodejs2\';
// 或是
let QRCode = require(\'qrcodejs2\');
页面容器
页面增加一个容器标签
<div id=\"qrcode\" ref=\"qrcode\"></div>
创建对象
creatQrCode() {
let text = \'二维码內容\';
let qrcode = new QRCode(this.$refs.qrcode, {
text: text, //二维码内容字符串数组
width: 128, //图象总宽
height: 128, //图象相对高度
colorDark: \'#000000\', //二维码前景色
colorLight: \'#ffffff\', //二维码背景颜色
correctLevel: QRCode.CorrectLevel.H, //容错机制等级
})
}
问题解决
1、消除早已形成的二维码
计划方案一：this.$refs.qrcode.innerHTML = \'\';
方案二： qrcode.clear(); // 消除二维码方式二
2、动态性更换二维码的內容
let string=\'新的内容\'
qrcode.makeCode(string)
3、出错提示 Error: code length overflow ？
这是由于url过长，造成二维码载入出错，可以降低容错性来解决。
改动主要参数：correctLevel: QRCode.CorrectLevel.H ，容错机制等级，由低到高分别为为L M Q H
4、字符串数组较长，二维码表明模糊不清该怎么办？
可以试着先将产生的二维码倍率扩张，随后在css上边固定不动表明高宽，那样可以扩张表明清晰度精密度
.qrcode-wrap{
width: 128px;
height: 128px;
}
.qrcode-wrap canvas,
.qrcode-wrap img {
width:100%;
height:100%;
}
<div id=\"qrcode\" ref=\"qrcode\" class=\"qrcode-wrap\"></div>
creatQrCode() {
let text = \'二维码內容\';
let qrcode = new QRCode(this.$refs.qrcode, {
text: text,
width: 128 * 3, //宽扩张3倍
height: 128 * 3, //高扩大3倍
colorDark: \'#000000\',
colorLight: \'#ffffff\',
correctLevel: QRCode.CorrectLevel.H,
})
}
5、二维码要想带白框该怎么办？
插件默认设置转化成的照片是沒有外框的
假如只想要在页面表明上面有外框
计划方案一：立即给容器上边加款式，运用padding的特点，挤压白框
.qrcode-border{
display: flex;
width: 128px;
height: 128px;
box-sizing: border-box;
padding: 10px;/*运用padding*/
border: 1px solid rgb(204, 204, 204);
}
<div id=\"qrcode\" ref=\"qrcode\" class=\"qrcode-border\"></div>
计划方案二：给容器加一个带外框款式的父级容器
.qrcode-container{
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 150px;
border: 1px solid #cccccc;
}
<div class=\"qrcode-container\">
<div id=\"qrcode\" ref=\"qrcode\"></div>
</div>
实际效果展现
✅PS：假如只想要【打印出】的白框外框，这2种计划方案还可以
QRCode.js 文本文档：
http://code.ciaoca.com/javascript/qrcode/
npm package 详细地址：
https://www.npmjs.com/package/qrcodejs2
github 地址：
https://github.com/davidshimjs/qrcodejs
假如要想页面和免费下载的二维码都带白框外框
可以融合插件html2canvas来完成（若有其他计划方案，热烈欢迎共享）
html2canvas 是一款运用javascript开展屏幕截屏的插件
//安裝
cnpm install --save html2canvas
//引进
import html2canvas from \"html2canvas\";
关键构思：
- 先应用QRCode生成二维码照片
- 随后应用html2canvas把带款式的二维码生成新的图片
- 掩藏QRCode转化成的二维码图片
<div ref=\"canvas\" class=\"canvas-box\" :style=\"{display:(originImg===true?\'none\':\'flex\')}\">
<div class=\"qrcode-box\">
<div ref=\"qrcode\" class=\"qrcode-img\"></div>
</div>
<div class=\"qrcode-text\">
扫一扫
</div>
</div>
<img :src=\"imgUrl\">
最后实际效果
html2canvas 文本文档详细地址：
http://html2canvas.hertzen.com/documentationgithub 地址：
https://github.com/niklasvh/html2canvas
前面插件JsBarcode生成条形码
安裝和引进
//安裝
cnpm install jsbarcode --save
//引进
import JsBarcode from \'jsbarcode\'
页面容器
<template>
<!-- 条码容器，可选择svg、canvas，或img标签 -->
<svg id=\"barcode\"></svg>
<!-- or -->
<canvas id=\"barcode\"></canvas>
<!-- or -->
<img id=\"barcode\"/>
</template
创建对象
不要在DOM还未载入时，启用jsbarcode库，例如create生命期
简版
JsBarcode(\'#barcode\', 12345678,
{
displayValue: true // 是不是在条码下边表明文本
}
)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
