二维码下载到本地功能

两种思路（都差不多）

二维码展示和下载按钮

• QRCode是一个非常方便好用的二维码生成工具，具体用法自己去看文档

const tempComponents = () => {
    
    return (
        <>
            <QRCode 
              value={`https://www.baidu.com/downCode/qrcode?schoolId=${20}&schoolName=${漯河市第二实验小学}`}
              id='qrCode'
            />
            <Button
              type='primary' 
              icon={<DownloadOutlined/>}
              onClick={downLoadRqCode}
            >下载二维码</Button>
        </>
    )
}

第一种

• 需要把button按钮用一个 id 为 down_link 的div包起来
• 创建一个新的img
• crossOrigin 为接触跨域限制
• 把 img 的 URL 赋值为 canvas 转过来的 URL
• 把 down_link 的 href 属性赋值为此 URL
• downLink.download 的值 为给下载的图片起个名字

  /**
   * @event 下载二维码到本地
   * @description
   */
  const downLoadRqCode = () => {
    const canvasImg = document.getElementById('qrCode') as HTMLElement; 
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.src = canvasImg.toDataURL('image/png');
    const downLink = document.getElementById('down_link') as HTMLElement;
    downLink.href = img.src;
    downLink.download = '图片名字';
  }

第二种

• 这种就更简单了，创建一个a标签，用完删了
• 不过还是的把 canvasImg 作为第一个参数传递 downLoadRqCode

  const canvasImg = document.getElementById('qrCode') as HTMLElement; 
  /**
   * @event 下载二维码到本地
   * @params {HTMLElement} canvas - 就是canvasImg
   * @params {string} name - 给下载的图片起个名字
   */
  const downLoadRqCode = (canvas: HTMLElement, name: string) => {
    const mockDownload = (blob: {size: number, type: string}) => {
      const aEle = document.createElement('a')
      aEle.textContent = `Download(${name})`;
      aEle.href = URL.createObjectURL(blob);
      aEle.setAttribute('style', 'display: none')
      aEle.download = name;
      aEle.click()
      setTimeout(() => {
        if (aEle.parentNode) {
          aEle.parentNode.removeChild(aEle);
        }
      }, 100)
    };
    canvas.toBlob((blob) => mockDownload(blob), 'image/png', 1);
  }