ant-design/components/qrcode/demo/download.tsx

27 lines
670 B
TypeScript
Raw Normal View History

feat: New Component QRCode (#38948) * feat: qrcode * chore: code clean * feat: New Component Qr-Code (#38891) * feat: QrCode * fix * fix * fix: fix bug * fix: fix bug * fix * fix * fix * delete * delete * test case * fix lint * bundlesize * demo * fix: fix test * remove dep * update snap * en docs * refactor: rename tests dir * Update components/qr-code/demo/base.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/base.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/download.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/logo.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qr-code/demo/logo.md Co-authored-by: MadCcc <1075746765@qq.com> * rename * fix * adjust text * rename * fix title * rename * rename * fix: snap * fix * bundlesize * update demo * update docs * add demo * add docs * add docs * test: add warning * update demo * bundlesize * update test case * update demo * feat: add onRefresh、add status * fix: fix demo * fix: fix demo * add locale * add locale * add test case * update snap * fix demo * update demo * update demo * update demo * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/interface.ts Co-authored-by: MadCcc <1075746765@qq.com> * Update components/qrcode/style/index.ts Co-authored-by: MadCcc <1075746765@qq.com> * fix * Update components/qrcode/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * fix * fix * fix * add decs * fix * fix * fix type * fix * fix demo * fix lint * fix lint * add test case for bordered * prettier-ignore Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: 栗嘉男 <lijianan@lijianandeMacBook-Pro.local>
2022-12-05 14:15:26 +08:00
import React from 'react';
import { QRCode, Button } from 'antd';
const downloadQRCode = () => {
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);
}
};
const App: React.FC = () => (
<div id="myqrcode">
<QRCode value="https://ant.design/" style={{ marginBottom: 16 }} />
<Button type="primary" onClick={downloadQRCode}>
Download
</Button>
</div>
);
export default App;