QRCode.js 生成二维码插件(vue2)
1 npm 或者 引入
npm install --save qrcode
或
<script src="qrcode.js"></script>
2. 引入
import QRCode from 'qrcodejs2' // 引入qrcode
3.页面
<div id="qrcode"></div>
4.调用传内容
// ts中报QRCode未声明的错可以这样声明: declare var QRCode: any;
function makeQRCode(qrCodeContent){
var qrcode = new QRCode("test", {
text: qrCodeContent, // 二维码内容
width: 128,
height: 128,
colorDark : "#000000", // 码的颜色
colorLight : "#ffffff", // 码的背景色
correctLevel : QRCode.CorrectLevel.H // 高度容错
});
// qrcode.clear(); // 可以清除二维码
// qrcode.makeCode("二维码的内容"); // 生成另外一个二维码
}
5.利用超链接下载二维码(不支持跨域)
function downloadQRCode() {
const qrCodeDiv: any = document.getElementById('qrcode'); // 找到二维码div
const url = qrCodeDiv.querySelector('canvas').toDataURL('image/png'); // 获取图片地址
const a = document.createElement('a'); // 创建一个a节点插入的document
const handle = new MouseEvent('click') // 模拟鼠标click点击事件
a.download = this.qrCodename // 设置a节点的download属性值
a.href = url; // 将图片的src赋值给a节点的href
a.dispatchEvent(handle) // 触发点击事件
}