復制生成二維碼

一、安裝插件

1、復制

npm install -g copy-to-clipboard

import copy from 'copy-to-clipboard';

2、生成二維碼 & 下載

npm install -g?qrcode

import QRCode from 'qrcode.react';

二、功能：生成二維碼 & 下載

效果圖

1、常規使用（下載圖片模糊）

會有個問題：生成的二維碼設置了 28px，下載的時候也是 28px，使用圖片放大下載的圖片就模糊。

        renderer: ({ record }) => {const url = record.get('registrationUrl');const downloadQRCode = () => {const canvas = document.getElementById('qrCodeEl');const image = canvas.toDataURL('image/png');const link = document.createElement('a');link.download = 'qrcode.png';link.href = image;link.click();};return (<>{url && (<div className={styles.registrationSource_down}><QRCodeid="qrCodeEl"value={url}size={28}level="H"includeMargin={true}style={{ border: '1px solid rgb(233, 238, 242)' }}/><span style={{ cursor: 'pointer' }} onClick={downloadQRCode}><imgsrc={require('@/assets/imgs/down.png')}alt="下載二維碼"/></span></div>)}</>);},

2、隱藏大尺寸二維碼（推薦）

        renderer: ({ record }) => {const url = record.get('registrationUrl');const downloadRef = useRef<HTMLDivElement>(null);const downloadQRCode = () => {if (!downloadRef.current) return;const canvas = downloadRef.current.querySelector('canvas');if (!canvas) return;const image = canvas.toDataURL('image/png');const link = document.createElement('a');link.download = 'qrcode.png';link.href = image;link.click();};return (<>{url && (<div className={styles.registrationSource_down}>{/* 顯示用小尺寸(28px) */}<QRCodevalue={url}size={28}level="H"includeMargin={true}style={{ border: '1px solid rgb(233, 238, 242)' }}/>{/* 隱藏的大尺寸(100px)僅用于下載 */}<div style={{ display: 'none' }} ref={downloadRef}><QRCodevalue={url}size={160}level="H"includeMargin={true}/></div><span style={{ cursor: 'pointer' }} onClick={downloadQRCode}><imgsrc={require('@/assets/imgs/down.png')}alt="下載二維碼"/></span></div>)}</>);},

三、復制

效果圖

1、功能實現

        renderer: ({ record }) => {const url = record.get('registrationUrl');const handleCopy = () => {copy(url);message.success(languageConfig('tips.copySuccess', '復制成功!'),1.5,'top',);};return (<><span>{url}</span><spanstyle={{ marginLeft: '6px', cursor: 'pointer' }}onClick={handleCopy}><img src={require('@/assets/imgs/copy.svg')} alt="" /></span></>);},

四、具體場景

需求：根據'輸入內容'生成url（可復制），再根據url生成圖片（可下載）

效果圖

1、功能實現

import {Form,Modal,useDataSet,message,TextField,Button,
} from 'choerodon-ui/pro';
import React, { useEffect, useRef, useState } from 'react';
import { LabelLayout } from 'choerodon-ui/pro/lib/form/enum';
import { FieldType } from 'choerodon-ui/dataset/data-set/enum';
import formatterCollections from 'hzero-front/lib/utils/intl/formatterCollections';
import {commonModelPrompt,languageConfig,prdTemCode,
} from '@/language/language';
import {RegistrationRecord,RegistrationSourceCreateProps,
} from '@/interface/registrationSource/main';
import { organizationId } from '@/common/config';
import {getRegistrationSourceDetail,postRegistrationSourceEdit,
} from '@/api/registrationSource/main';
import '@/assets/styles/c7n.less';
import { ButtonColor, FuncType } from 'choerodon-ui/pro/lib/button/enum';
import copy from 'copy-to-clipboard';
import QRCode from 'qrcode.react';
import styles from '../list/main.less';const CreateModel: React.FC<RegistrationSourceCreateProps> = ({/** 控制彈框顯示/隱藏 */visible,/** 設置彈框顯示/隱藏的回調函數 */setVisible,/** 彈框關閉后回調函數 */onSelect,infoData,
}) => {const { edit, id } = infoData;const url = 'http://wwww.shuaishuaige.com/login';/** ds */const [, setUpdateDs] = useState(new Date().getTime());const formDataDs = useDataSet(() => {return {autoCreate: true,fields: [{name: 'registrationSource',type: FieldType.string,label: languageConfig('registrationSource.label.registrationSource','注冊來源',),placeholder: languageConfig('registrationSource.label.registrationSource','注冊來源',),maxLength: 30,required: true,},{name: 'registrationCode',type: FieldType.string,},{name: 'registrationUrl',type: FieldType.string,},],events: {update: () => {setUpdateDs(new Date().getTime());},},};}, []);/** 詳情 */const getDetail = async () => {const res = await getRegistrationSourceDetail({ id });// console.log('詳情res', res);formDataDs.current?.set({...res,});};useEffect(() => {if (visible) {formDataDs.loadData([{}]);if (edit) {getDetail();}openModal();}}, [visible]);/** 彈框打開 */const openModal = () => {Modal.open({title: edit? languageConfig('btn.edit.registrationSource', '編輯注冊來源'): languageConfig('btn.add.registrationSource', '新增注冊來源'),style: { width: '400px' },closable: true,maskClosable: true,keyboardClosable: false,onClose: () => {setVisible(false);},children: <Box />,onOk: async () => {const validate = await formDataDs.current?.validate(true);if (!validate) return false;const {id,objectVersionNumber,registrationSource,registrationCode,registrationUrl,} = formDataDs.current?.toData() || {};// 提交參數const params: RegistrationRecord = {registrationSource,registrationCode,registrationUrl,registrationStatus: 'Y',tenantId: organizationId,...(id ? { id, objectVersionNumber } : {}),};const res = await postRegistrationSourceEdit(params);if (res.failed) {message.error(res.message, 1.5, 'top');return false;}message.success(languageConfig('tips.operationSuccess', '操作成功!'),1.5,'top',);onSelect();},});};/** 內容 */const Box = () => {const [forceUpdate, setForceUpdate] = useState(false);useEffect(() => {const handler = () => {setForceUpdate(prev => !prev);};formDataDs.addEventListener('update', handler);return () => formDataDs.removeEventListener('update', handler);}, []);/** 復制 */const handleCopy = () => {const { registrationUrl } = formDataDs.current?.toData() || {};copy(registrationUrl);message.success(languageConfig('tips.copySuccess', '復制成功!'),1.5,'top',);};/** 下載 */const downloadRef = useRef<HTMLDivElement>(null);const downloadQRCode = () => {if (!downloadRef.current) return;const canvas = downloadRef.current.querySelector('canvas');if (!canvas) return;const image = canvas.toDataURL('image/png');const link = document.createElement('a');link.download = 'qrcode.png';link.href = image;link.click();};/** 生成url 和 圖片 */const handleGenerate = async () => {const { registrationSource, registrationCode } =formDataDs.current?.toData() || {};// 1、code 不存在if (!registrationCode) {// 調用 apiconst res = await postRegistrationSourceEdit({registrationSource,tenantId: organizationId,});if (res.failed) {message.error(res.message, 1.5, 'top');return false;}formDataDs.loadData([res]);// url 接接const linkUrl = `${url}?RE=${res?.registrationCode}`;formDataDs.current?.set('registrationUrl', linkUrl);}// 2、code 存在const linkUrl = `${url}?RE=${formDataDs.current?.get('registrationCode',)}`;formDataDs.current?.set('registrationUrl', linkUrl);};return (<div className="ltc-c7n-style"><FormdataSet={formDataDs}columns={1}labelWidth={180}labelLayout={LabelLayout.vertical}useColon={false}><TextFieldname="registrationSource"onChange={val => {if (val === null) {formDataDs.current?.set('registrationUrl', '');}}}clearButton/><div style={{ marginTop: '4px' }}><ButtonfuncType={FuncType.raised}color={ButtonColor.primary}disabled={formDataDs.current?.get('registrationSource') ? false : true}onClick={handleGenerate}>{languageConfig('registrationSource.btn.generateUrl','生成url & 二維碼',)}</Button></div>{formDataDs.current?.get('registrationUrl') && (<><div className={styles.registrationSource_url}><div className={styles.registrationSource_url_title}>{languageConfig('monthlyReports.label.registrationUrl','注冊url',)}</div><div className={styles.registrationSource_url_text}><span>{formDataDs.current?.get('registrationUrl')}</span><Button funcType={FuncType.link} onClick={handleCopy}>{languageConfig('tips.copy', '復制')}</Button></div><divclassName={styles.registrationSource_url_title}style={{ marginTop: '16px' }}>{languageConfig('monthlyReports.label.registrationQrCode','注冊二維碼',)}</div><div className={styles.registrationSource_url_qrCode}>{/* 二維碼 */}<div className={styles.registrationSource_url_qrCode_pic}>{/* 顯示用小尺寸(64px) */}<QRCodevalue={formDataDs.current?.get('registrationUrl')}size={64}level="H"includeMargin={true}style={{ border: '1px solid rgb(233, 238, 242)' }}/>{/* 隱藏的大尺寸(100px)僅用于下載 */}<div style={{ display: 'none' }} ref={downloadRef}><QRCodevalue={formDataDs.current?.get('registrationUrl')}size={160}level="H"includeMargin={true}/></div></div>{/* 下載 */}<Button funcType={FuncType.link} onClick={downloadQRCode}>{languageConfig('tips.qrCodeTip', '下載')}</Button></div></div></>)}</Form></div>);};return <></>;
};export default formatterCollections({code: [prdTemCode, commonModelPrompt],
})(CreateModel);