mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
demo: Add svg qrcode download demo (#49553)
* 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
GitHub
parent
010f82bd1a
commit
d8c98e18ab
@ -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`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
id="myqrcode"
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="background-color: rgb(255, 255, 255); margin-bottom: 16px; width: 160px; height: 160px;"
|
||||
class="ant-space-item"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
role="img"
|
||||
width="160"
|
||||
/>
|
||||
<img
|
||||
crossorigin="anonymous"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||||
style="display: none;"
|
||||
/>
|
||||
<div
|
||||
class="ant-segmented"
|
||||
>
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
>
|
||||
<label
|
||||
class="ant-segmented-item ant-segmented-item-selected"
|
||||
>
|
||||
<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>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span>
|
||||
Download
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
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>
|
||||
`;
|
||||
|
||||
|
||||
@ -170,31 +170,79 @@ Array [
|
||||
|
||||
exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
id="myqrcode"
|
||||
>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
style="background-color:#fff;margin-bottom:16px;width:160px;height:160px"
|
||||
class="ant-space-item"
|
||||
>
|
||||
<canvas
|
||||
height="160"
|
||||
role="img"
|
||||
width="160"
|
||||
/>
|
||||
<img
|
||||
crossorigin="anonymous"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||||
style="display:none"
|
||||
/>
|
||||
<div
|
||||
class="ant-segmented"
|
||||
>
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
>
|
||||
<label
|
||||
class="ant-segmented-item ant-segmented-item-selected"
|
||||
>
|
||||
<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>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span>
|
||||
Download
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
class="ant-qrcode"
|
||||
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>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,31 +1,58 @@
|
||||
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');
|
||||
if (canvas) {
|
||||
const url = canvas.toDataURL();
|
||||
const a = document.createElement('a');
|
||||
a.download = 'QRCode.png';
|
||||
a.href = url;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
doDownload(url, 'QRCode.png');
|
||||
}
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div id="myqrcode">
|
||||
<QRCode
|
||||
value="https://ant.design/"
|
||||
bgColor="#fff"
|
||||
style={{ marginBottom: 16 }}
|
||||
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
||||
/>
|
||||
<Button type="primary" onClick={downloadQRCode}>
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
const downloadSvgQRCode = () => {
|
||||
const svg = document.getElementById('myqrcode')?.querySelector<SVGElement>('svg');
|
||||
const svgData = new XMLSerializer().serializeToString(svg!);
|
||||
const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
doDownload(url, 'QRCode.svg');
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [renderType, setRenderType] = React.useState<QRCodeProps['type']>('canvas');
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user