qrcode

package.json

@@ -64,7 +64,7 @@
     "md5": "^2.3.0",
     "moment": "^2.29.1",
     "omit.js": "^2.0.2",
-    "qrcodejs2": "^0.0.2",
+    "qrcode": "^1.5.0",
     "rc-menu": "^9.1.0",
     "rc-util": "^5.16.0",
     "react": "^17.0.0",

src/components/QRCode/index.jsx

@@ -1,9 +1,63 @@
-import React from 'react'
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useImperativeHandle } from 'react'
+import classNames from 'classnames'
+import QRCode from 'qrcode'
+import html2canvas from 'html2canvas'
+import styles from './style.less'
+
+export default forwardRef((props, ref) => {
+  const { className, width = 430, border, content, title, fileName, onError } = props
+
+  const rootRef = useRef()
+  const canvasRef = useRef()
+
+  const { style1, style2 } = useMemo(() => {
+    return {
+      style1: {
+        border: border ? '2px solid rgba(0,0,0)' : 'none',
+        borderRadius: border ? '8px' : 'none'
+      },
+      style2: {
+        width: `${width}px`,
+        height: `${width}px`,
+      }
+    }
+  }, [width, border])
+
+  const qrOption = useMemo(() => ({
+    margin: 0,
+    width: width,
+    errorCorrectionLevel: 'M'
+  }), [width])
+
+  useEffect(() => {
+    if (content) {
+      QRCode.toCanvas(canvasRef.current, content, qrOption, onError)
+    }
+  }, [content, qrOption, onError])
+
+  useImperativeHandle(ref, () => ({
+    download: () => {
+      return new Promise((resolve, reject) => {
+        html2canvas(rootRef.current).then((canvas) => {
+          const imageData = canvas.toDataURL('image/png', .8);
+          const link = document.createElement('a');
+          link.download = `${fileName || 'qrcode'}.png`
+          link.href = imageData
+          link.click()
+          resolve()
+        }).catch(reject)
+      })
+    }
+  }), [fileName])
 
-export default (props) => {
   return (
-    <div>
-      <div></div>
+    <div className={classNames(className, styles['qrcode-box'])} ref={rootRef}>
+      <div className={styles['qrcode-container']} style={style1}>
+        <canvas ref={canvasRef} style={style2}/>
+      </div>
+      {
+        title && <h3>{title}</h3>
+      }
     </div>
   )
-}
+})

src/components/QRCode/style.less

@@ -0,0 +1,18 @@
+
+.qrcode-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .qrcode-container {
+    padding: 16px;
+    flex: none;
+  }
+
+  h3 {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 3em;
+  }
+}

src/components/RightContent/QrCode/QrCode.jsx

@@ -1,43 +1,21 @@
 import React, {useState, useRef, useEffect, useCallback} from 'react'
 import { useModel } from 'umi'
 import { Button, Spin } from 'antd';
-import QRCode from 'qrcodejs2'
+import QRCode from '@/components/QRCode'
 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();
+    if (qrcodeRef.current) {
+      qrcodeRef.current.download();
     }
   }, [])
 
-
-  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"
@@ -49,7 +27,7 @@ export default (props) => {
   : (
       <div className={styles.qrcodebox}>
         <p>疫情监测结果表入口</p>
-        <div ref={qrcodeRef} />
+        <QRCode ref={qrcodeRef} width={200} content={initialState.report_url} />
         <p><Button onClick={downloadQrcode}>下载</Button></p>
       </div>
     )

src/pages/org/org/Edit.jsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useCallback, useRef } from 'react'
+import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react'
 import { useModel } from 'umi'
 import { Form, Input, Button, message } from 'antd';
 import ProCard from '@ant-design/pro-card';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import QRCode from 'qrcodejs2'
+import QRCode from '@/components/QRCode'
 import md5 from 'md5';
 import { getDetail, saveOrg, updateOrg, saveOrgUser, getOrgAdminDetail } from '@/services/org';
 
@@ -16,17 +16,18 @@ export default (props) => {
   const [formData, setFormData] = useState()
   const [loading, setLoading] = useState(false)
   const qrcodeRef = useRef()
-  const linkRef = useRef()
+  const qrcodeText = useMemo(() => initialState.report_url + '#resume-work-form?org=' + id, [id, initialState.report_url])
 
   const [adminForm] = Form.useForm();
   const [adminFormData, setAdminFormData] = useState()
   const [adminLoading, setAdminLoading] = useState(false)
 
   const downloadQrcode = useCallback(() => {
-    if (linkRef.current) {
-      linkRef.current.click();
+    if (qrcodeRef.current) {
+      qrcodeRef.current.download();
     }
   }, [])
+
   const onFinish = (values) => {
     setLoading(true)
     if (id) {
@@ -72,19 +73,6 @@ export default (props) => {
       getDetail(id).then(res => {
         setFormData(res);
         form.setFieldsValue(res);
-
-        // 初始化二维码
-        const qrcode = new QRCode(qrcodeRef.current, {
-          width: 160,
-          height: 160, // 高度
-          text: initialState.report_url + '#resume-work-form?org=' + id
-        })
-        const canvas = qrcodeRef.current.querySelector('canvas')
-        // 创建下载链接
-        const aElement = document.createElement('a');
-        linkRef.current = aElement;
-        linkRef.current.download = res.orgName + '.png'
-        linkRef.current.href = canvas.toDataURL('image/jpg')
       })
       getOrgAdminDetail(id).then((res) => {
         setAdminFormData(res);
@@ -124,7 +112,7 @@ export default (props) => {
               </Form.Item>
               {
                 id && <Form.Item label=' ' colon={false} wrapperCol={{ offset: 3 }}>
-                  <div ref={qrcodeRef} />
+                  <QRCode ref={qrcodeRef} border width={200} content={qrcodeText} title={formData?.orgName} fileName={formData?.orgName} />
                 </Form.Item>
               }
               <Form.Item label=' ' colon={false} >