mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 11:32:52 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

demo: Add svg qrcode download demo (#49553)

Browse Source 
* feat: add download qrcode when render type is svg

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code
This commit is contained in:
kiner-tang 2024-06-22 17:33:06 +08:00 committed by GitHub
parent 010f82bd1a
commit d8c98e18ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 182 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -213,31 +213,79 @@ exports[`renders components/qr-code/demo/customSize.tsx extend context correctly
exports[`renders components/qr-code/demo/download.tsx extend context correctly 1`] = ` exports[`renders components/qr-code/demo/download.tsx extend context correctly 1`] = `
<div <div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
id="myqrcode" id="myqrcode"
> >
<div <div
class="ant-qrcode" class="ant-space-item"
style="background-color: rgb(255, 255, 255); margin-bottom: 16px; width: 160px; height: 160px;"
> >
<canvas <div
height="160" class="ant-segmented"
role="img" >
width="160" <div
/> class="ant-segmented-group"
<img >
crossorigin="anonymous" <label
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" class="ant-segmented-item ant-segmented-item-selected"
style="display: none;" >
/> <input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="canvas"
>
canvas
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="svg"
>
svg
</div>
</label>
</div>
</div>
</div> </div>
<button <div
class="ant-btn ant-btn-primary" class="ant-space-item"
type="button"
> >
<span> <div>
Download <div
</span> class="ant-qrcode"
</button> style="background-color: rgb(255, 255, 255); margin-bottom: 16px; width: 160px; height: 160px;"
>
<canvas
height="160"
role="img"
width="160"
/>
<img
crossorigin="anonymous"
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
style="display: none;"
/>
</div>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Download
</span>
</button>
</div>
</div>
</div> </div>
`; `;

86
components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -170,31 +170,79 @@ Array [
exports[`renders components/qr-code/demo/download.tsx correctly 1`] = ` exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
<div <div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
id="myqrcode" id="myqrcode"
> >
<div <div
class="ant-qrcode" class="ant-space-item"
style="background-color:#fff;margin-bottom:16px;width:160px;height:160px"
> >
<canvas <div
height="160" class="ant-segmented"
role="img" >
width="160" <div
/> class="ant-segmented-group"
<img >
crossorigin="anonymous" <label
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" class="ant-segmented-item ant-segmented-item-selected"
style="display:none" >
/> <input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="canvas"
>
canvas
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="svg"
>
svg
</div>
</label>
</div>
</div>
</div> </div>
<button <div
class="ant-btn ant-btn-primary" class="ant-space-item"
type="button"
> >
<span> <div>
Download <div
</span> class="ant-qrcode"
</button> style="background-color:#fff;margin-bottom:16px;width:160px;height:160px"
>
<canvas
height="160"
role="img"
width="160"
/>
<img
crossorigin="anonymous"
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
style="display:none"
/>
</div>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Download
</span>
</button>
</div>
</div>
</div> </div>
`; `;

69
components/qr-code/demo/download.tsx
View File

@ -1,31 +1,58 @@
import React from 'react'; import React from 'react';
import { Button, QRCode } from 'antd'; import { Button, QRCode, Segmented, Space } from 'antd';
import type { QRCodeProps } from 'antd';
const downloadQRCode = () => { function doDownload(url: string, fileName: string) {
const a = document.createElement('a');
a.download = fileName;
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
const downloadCanvasQRCode = () => {
const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas'); const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas');
if (canvas) { if (canvas) {
const url = canvas.toDataURL(); const url = canvas.toDataURL();
const a = document.createElement('a'); doDownload(url, 'QRCode.png');
a.download = 'QRCode.png';
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} }
}; };
const App: React.FC = () => ( const downloadSvgQRCode = () => {
<div id="myqrcode"> const svg = document.getElementById('myqrcode')?.querySelector<SVGElement>('svg');
<QRCode const svgData = new XMLSerializer().serializeToString(svg!);
value="https://ant.design/" const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
bgColor="#fff" const url = URL.createObjectURL(blob);
style={{ marginBottom: 16 }}
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" doDownload(url, 'QRCode.svg');
/> };
<Button type="primary" onClick={downloadQRCode}>
Download const App: React.FC = () => {
</Button> const [renderType, setRenderType] = React.useState<QRCodeProps['type']>('canvas');
</div> return (
); <Space id="myqrcode" direction="vertical">
<Segmented
options={['canvas', 'svg']}
onChange={(val) => setRenderType(val as QRCodeProps['type'])}
/>
<div>
<QRCode
type={renderType}
value="https://ant.design/"
bgColor="#fff"
style={{ marginBottom: 16 }}
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
/>
<Button
type="primary"
onClick={renderType === 'canvas' ? downloadCanvasQRCode : downloadSvgQRCode}
>
Download
</Button>
</div>
</Space>
);
};
export default App; export default App;