feats

src/components/RightContent/QRCode.jsx

@@ -1,111 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { QrcodeOutlined } from '@ant-design/icons';
-import { Button, Menu, Spin } from 'antd';
-import { useModel } from 'umi';
-import HeaderDropdown from '../HeaderDropdown';
-import QRCode from 'qrcodejs2'
-import styles from './index.less';
-import { useRef } from 'react';
-
-const AvatarDropdown = () => {
-  const { initialState } = useModel('@@initialState');
-  const [imgURL, setImgURL] = useState();
-  const [isLoading, setLoading] = useState(false);
-  const qrcodeRef = useRef()
-
-  const qrcode = () => {
-    const qrcode = new QRCode(qrcodeRef.current, {
-      width: 200,
-      height: 200, // 高度
-      text: initialState.report_url
-    })
-  }
-  // canvans转base64 很消耗内存所以把转换后的结果imgURL拿出来
-  const toUrl = () => {
-    qrcodeRef.current.value = ''
-    qrcode() // 下载之前首先要有二维码
-    // 先找到canvas节点下的二维码图片
-    const myCanvas = qrcodeRef.current.getElementsByTagName('canvas')
-    // 设置a的href属性将canvas变成png格式
-    setLoading(true);
-    setImgURL(myCanvas[0].toDataURL('image/jpg'))
-    setLoading(false);
-  }
-  // 下载二维码 把base64转为blob并且下载
-  const downloadQrcode = () => {
-    const img = qrcodeRef.current.getElementsByTagName('img')
-    // 创建一个a节点
-    const a = document.createElement('a')
-    // 获得浏览器用户代理
-    const ua = navigator.userAgent
-    var blob = base64ToBlob(imgURL)
-    if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
-      a.download = '物业二维码.png'// 下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
-      // 讲blob数据转换成url
-      a.href = URL.createObjectURL(blob)
-      a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))// 兼容火狐
-    } else { // 谷歌兼容下载
-      img.src = imgURL
-      a.href = img.src
-      // 设置下载文件的名字
-      a.download = '物业二维码.png'
-      // 点击
-      a.click()
-    }
-  }
-  // base64转blob
-  const base64ToBlob = (code) => {
-    // this.imgURl打印出来可以看到等于data:image/png;base64,+base64码
-    const parts = code.split(';base64,')
-    // 截取后pasts[0]等于data:image/png  parts[1]就是base64吗 （至于为什么我们上面写image/jpg 现在变成png我也不知道哈哈哈哈哈）
-    const contentType = parts[0].split(':')[1]
-    // 用:分隔contentType 等于image/png
-    const raw = window.atob(code.split(',')[1])
-    // 获取解码后的长度
-    const rawLength = raw.length
-    const uInt8Array = new Uint8Array(rawLength)
-    for (let i = 0; i < rawLength; ++i) {
-      // 循环 把每位都转为相对应的unicode码
-      uInt8Array[i] = raw.charCodeAt(i)
-    }
-    // Blob储存二进制的
-    return new Blob([uInt8Array], { type: contentType })
-  }
-
-  useEffect(() => {
-    toUrl();
-  }, [])
-  const loading = (
-    <span className={`${styles.action} ${styles.account}`}>
-      <Spin
-        size="small"
-        style={{
-          marginLeft: 8,
-          marginRight: 8,
-        }}
-      />
-    </span>
-  );
-  if (isLoading) {
-    return loading;
-  }
-  const menuHeaderDropdown = (
-    <div className={styles.qrcodebox}>
-      <img src={imgURL} style={{ width: '160px', height: '160px' }} />
-      <p><Button onClick={() => downloadQrcode()}>下载</Button></p>
-    </div>
-  );
-
-  return (
-    <HeaderDropdown overlay={menuHeaderDropdown}>
-      <span className={`${styles.action} ${styles.account}`} style={{ padding: 0 }}>
-        <span className={`${styles.name} anticon`}><QrcodeOutlined style={{ fontSize: '24px' }} /></span>
-        {/* 只是用来画canvans不用显示 */}
-        <div style={{ display: 'none' }} ref={qrcodeRef} />
-      </span>
-    </HeaderDropdown>
-  );
-};
-
-
-export default AvatarDropdown;

src/components/RightContent/QrCode/QrCode.jsx

@@ -0,0 +1,55 @@
+import React, {useState, useRef, useEffect, useCallback} from 'react'
+import { useModel } from 'umi'
+import { Button, Spin } from 'antd';
+import QRCode from 'qrcodejs2'
+import styles from './style.less';
+
+export default (props) => {
+  const { initialState } = useModel('@@initialState');
+  const [isLoading, setLoading] = useState(false);
+  const qrcodeRef = useRef()
+  const linkRef = useRef()
+
+  const downloadQrcode = useCallback(() => {
+    if (linkRef.current) {
+      linkRef.current.click();
+    }
+  }, [])
+
+
+  useEffect(() => {
+    // 初始化二维码
+    const qrcode = new QRCode(qrcodeRef.current, {
+      width: 200,
+      height: 200, // 高度
+      text: initialState.report_url
+    })
+
+    const canvas = qrcodeRef.current.querySelector('canvas')
+
+    // 创建下载链接
+    const aElement = document.createElement('a');
+    linkRef.current = aElement;
+    linkRef.current.download = 'qrcode.png'
+
+    // 构造链接地址
+    setLoading(true);
+    linkRef.current.href = canvas.toDataURL('image/jpg')
+    setLoading(false);
+  }, [])
+
+  return isLoading ?
+    <Spin
+      size="small"
+      style={{
+        marginLeft: 8,
+        marginRight: 8,
+      }}
+    />
+  : (
+      <div className={styles.qrcodebox}>
+        <div ref={qrcodeRef} />
+        <p><Button onClick={downloadQrcode}>下载</Button></p>
+      </div>
+    )
+}

src/components/RightContent/QrCode/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { QrcodeOutlined } from '@ant-design/icons';
+import HeaderDropdown from '@/components/HeaderDropdown';
+import QrCode from './QrCode';
+import styles from '../index.less';
+
+export default (props) => {
+
+  return (
+    <HeaderDropdown overlay={<QrCode />}>
+      <span className={`${styles.action} ${styles.account}`} style={{ padding: 0 }}>
+        <span className={`${styles.name} anticon`}><QrcodeOutlined style={{ fontSize: '24px' }} /></span>
+      </span>
+    </HeaderDropdown>
+  );
+};

src/components/RightContent/QrCode/style.less

@@ -0,0 +1,7 @@
+.qrcodebox{
+  padding: 16px;
+  text-align: center;
+  img{
+    margin-bottom: 16px;
+  }
+}

src/components/RightContent/index.jsx

@@ -1,6 +1,6 @@
 import { Space } from 'antd';
 import Avatar from './AvatarDropdown';
-import QRCodeCompontent from './QRCode';
+import QRCode from './QrCode';
 import styles from './index.less';
 
 const GlobalHeaderRight = () => {
@@ -10,7 +10,7 @@ const GlobalHeaderRight = () => {
   
   return (
     <Space className={className}>
-      <QRCodeCompontent />
+      <QRCode />
       <Avatar />      
     </Space>
   );

src/components/RightContent/index.less

@@ -10,13 +10,6 @@
     min-width: 160px;
   }
 }
-.qrcodebox{
-  padding: 16px;
-  text-align: center;
-  img{
-    margin-bottom: 16px;
-  }
-}
 
 .right {
   display: flex;