QRcode及html2canvas

使用QRcode生成二维码

1、安装npm install qrcode
2、引入import QRCode from ‘qrcode’
3、进一步使用处理：

export async function getQRCode(url) {
  const _myQRCode = await QRCode.toDataURL(url)
  return _myQRCode
}

4、实际使用：

const createQRCode = async () => {
  const url = 'http://xxxxx'; // url
  const qrcodeUrl = await getQRCode(url);
  setQrData(qrcodeUrl); // 存储对应的二维码图片base64
}

愉快又简单！！！

html2canvas与jspdf生成图片

1、首先写一块内容，加上获取dom的id；如：

<div id='pdfDom'>
<div>1111</div>
<div>222</div>
<div>33</div>
</div>

2、固定生成图片写法

    function donwloadImage() {
      // html -> canvas
      html2canvas(document.querySelector("#pdfDom")).then(canvas => {
        // canvas -> pdf
        const a4Width = 595.28; // a4宽高
        const a4Height = 841.89;
        const options = {
          allowTaint: true,
          name: `凭证${new Date().getTime()}`,
          dpi: window.devicePixelRatio,
          scale: 4,  // 导出文件清晰度，值越大清晰度越高，文件体积越大（默认值为设备dpr*2）
        }
        // 生成的画布元素宽高（需要收缩回原比例大小）
        const canvasWidth = canvas.width / options.scale;
        const canvasHeight = canvas.height / options.scale;
        // 页面等比例缩放后宽高
        const pageWidth = a4Width;
        const pageHeight = (a4Width / canvasWidth) * canvasHeight;

        //返回图片dataURL，参数：图片格式和清晰度(0-1)
        const jpeg = canvas.toDataURL('image/jpeg', 1.0);

        //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
        const doc = new JsPDF('', 'pt', 'a4');
        doc.addImage(jpeg, 'JPEG', 0, 0, pageWidth, pageHeight); // 从图片顶部开始打印
        doc.save(options.name + '.pdf');

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        // if (canvasHeight < pageHeight) {
        //   doc.addImage(jpeg, 'JPEG', 0, 0, pageWidth, pageHeight); // 从图片顶部开始打印
        // } else {
        //   while (canvasHeight > 0) {
        //     doc.addImage(jpeg, 'JPEG', 0, position, pageWidth, pageHeight);
        //     canvasHeight -= pageHeight;
        //     position -= a4Height;
        //     //避免添加空白页
        //     if (canvasHeight > 0) {
        //       doc.addPage();
        //     }
        //   }
        // }
      });
    }

3、调用donwloadImage方法即可，注意需要dom加载了才能下载，有特殊场景就使用显隐来控制吧。