Vue 生成二维码

灰太狼 2022-11-27 03:22 349阅读 0赞

https://www.cnblogs.com/TreeCTJ/p/12736833.html

https://blog.csdn.net/qq_25983579/article/details/103956798 Vue使用QRCode插件，生成二维码及错误提示Cannot read property ‘appendChild’ of null”

1.安装文件

npm install --save qrcode2

2.引入文件

import QRCode from 'qrcode2';

3.生成文件 (移动端宽高写一半)

// 生成二维码
    crateQrcode(text) {
      this.ewmmaskOff = true;
      this.$nextTick(() => {
        let qr = new QRCode(this.$refs.qrCodeUrl, {
          width: 400,
          height: 400, // 高度
          text: text, // 二维码内容
          colorDark: "#333",
          colorLight: "#fff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L,
        });
      });
    },

4.清空二维码

document.getElementById("qrcode").innerHTML = "";

5.特别提醒

注意：一定要在div生成之后再生成二维码，否则就会出现Cannot read property ‘appendChild’ of null”的错误
this.$nextTick

其他

生成二维码使用 QRCode 生成二维码import QRCode from 'qrcode';
// 使用 async 生成图片
const options = {};
const url = window.location.href;
async url => {
  try {
    console.log(await QRCode.toDataURL(url, options))
  } catch (err) {
    console.error(err);
  }
}
将 await QRCode.toDataURL(url, options) 赋值给 
图片 url 即可生成图片主要是使用 htmlToCanvas 生成 canvas 画布import html2canvas from 'html2canvas';
html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});
但是不单单在此处就完了，由于是 canvas 的原因。
移动端生成出来的图片比较模糊。我们使用一个新的 canvas 方法多倍生成，
放入一倍容器里面，达到更加清晰的效果，通过超链接下载图片 下载文件简单实现，
更完整的实现方式之后更新const scaleSize = 2;
const newCanvas = document.createElement("canvas");
const target = document.querySelector('div');
const width = parseInt(window.getComputedStyle(target).width);
const height = parseInt(window.getComputedStyle(target).height);
newCanvas.width = width * scaleSize;
newCanvas.height = widthh * scaleSize;
newCanvas.style.width = width + "px";
newCanvas.style.height =width + "px";
const context = newCanvas.getContext("2d");
context.scale(scaleSize, scaleSize);
html2canvas(document.querySelector('.demo'), { canvas: newCanvas }).then(function(canvas) {
  // 简单的通过超链接设置下载功能
  document.querySelector(".btn").setAttribute('href', canvas.toDataURL());
}