Ant Design QRCode 组件实战基于 canvas 与 svg 两种渲染类型的二维码下载方案【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-designAnt Design 的 QRCode 组件自antd5.1.0提供本身不内置下载能力但利用其canvas/svg两种渲染类型配合浏览器原生 API 即可实现一套完整的二维码图片下载功能。本文以仓库中 下载二维码示例 为主线讲解两种渲染模式各自的下载原理、完整可运行代码、组件关键配置以及落地时的注意事项读完即可在自己的项目中直接复用。背景QRCode 的两种渲染类型在动手写下载逻辑之前需要先理解 QRCode 组件的渲染机制。通过 QRCodeProps 可以确认组件支持type属性取值为canvas | svg默认值是canvas对应antd5.6.0新增的类型切换能力参数说明类型默认值type渲染类型canvas \| svgcanvasvalue扫描后的文本string-icon二维码中图片的地址string-size二维码大小number160color二维码颜色string#000bgColor二维码背景颜色stringtransparenterrorLevel纠错等级L \| M \| Q \| HM从 组件实现 可以看到QRCode 底层分别调用rc-component/qrcode的QRCodeCanvas与QRCodeSVG完成绘制{type canvas ? QRCodeCanvas {...qrCodeProps} / : QRCodeSVG {...qrCodeProps} /}也就是说页面中最终产出的是真实的canvas元素或svg元素。这正是下载方案的入口两种元素对应的序列化手段完全不同因此官方示例分别实现了两个下载函数。完整实现官方 download 示例解析仓库中 download.tsx 给出了下载二维码的简单实现对应演示文档 download.md。核心思路是用Segmented在canvas/svg之间切换渲染类型再根据当前类型调用不同的下载函数。通用下载函数模拟a点击无论哪种格式最终都通过创建一个临时的a标签并触发点击来完成浏览器下载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); }要点说明a.download指定保存的文件名例如QRCode.png或QRCode.svg必须先将元素插入document.body再调用click()否则部分浏览器不会触发下载下载完成后立即removeChild清理 DOM避免留下多余节点。canvas 方案toDataURL()导出 PNGcanvas 渲染模式下二维码绘制在canvas上直接调用canvas.toDataURL()即可得到 PNG 图片的 data URLconst downloadCanvasQRCode () { const canvas document.getElementById(myqrcode)?.querySelectorHTMLCanvasElement(canvas); if (canvas) { const url canvas.toDataURL(); doDownload(url, QRCode.png); } };关键点通过document.getElementById(myqrcode)定位 QRCode 的外层容器再用querySelector(canvas)拿到真实画布toDataURL()默认导出image/png格式无需传参外层Space容器上挂了idmyqrcode这正是示例用来精确锁定二维码元素的定位手段。svg 方案序列化为 Blob 并生成 Object URLsvg 渲染模式下没有 canvas需要先将 SVG 节点序列化为字符串再封装成 Blob最后通过URL.createObjectURL生成可下载的临时地址const downloadSvgQRCode () { const svg document.getElementById(myqrcode)?.querySelectorSVGElement(svg); const svgData new XMLSerializer().serializeToString(svg!); const blob new Blob([svgData], { type: image/svgxml;charsetutf-8 }); const url URL.createObjectURL(blob); doDownload(url, QRCode.svg); };这条链路上的三个关键 API 缺一不可XMLSerializer().serializeToString(svg)把 SVG DOM 节点序列化成 XML 文本new Blob([svgData], { type: image/svgxml;charsetutf-8 })把文本包装成指定 MIME 类型的二进制对象charsetutf-8保证中文等字符不乱码URL.createObjectURL(blob)为 Blob 生成一个可被a引用的临时 URL。组装组件与切换逻辑const App: React.FC () { const [renderType, setRenderType] React.useStateQRCodeProps[type](canvas); return ( Space idmyqrcode directionvertical Segmented options{[canvas, svg]} onChange{(val) setRenderType(val as QRCodeProps[type])} / div QRCode type{renderType} valuehttps://ant.design/ bgColor#fff style{{ marginBottom: 16 }} iconhttps://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg / Button typeprimary onClick{renderType canvas ? downloadCanvasQRCode : downloadSvgQRCode} Download /Button /div /Space ); };示例中几个值得注意的配置type{renderType}由Segmented控制实现切换渲染类型后同一按钮下载对应格式按钮的onClick根据当前类型动态选择downloadCanvasQRCode或downloadSvgQRCodevaluehttps://ant.design/作为二维码承载的文本内容实际业务中可替换为任意链接、字符串bgColor#fff将背景设为白色避免透明背景在部分场景下显示异常组件也展示了icon的用法在二维码中心嵌入一张图片示例使用的是支付宝风格 SVG 图标。注意 组件源码 会给出开发警告当使用icon时errorLevel不建议设为L因为低纠错率会影响带图二维码的扫描成功率。组件源码佐证下载目标从哪来理解下载代码中querySelector(canvas)与querySelector(svg)的写法需要回到组件实现本身。在 index.tsx 中可以看到组件默认值const { value, type canvas, icon , size 160, color token.colorText, errorLevel M, status active, bordered true, bgColor transparent, ... } props;且最终渲染结构为div {...rest} className{mergedCls} style{mergedStyle} {status ! active (/* 状态遮罩层 */)} {type canvas ? QRCodeCanvas {...qrCodeProps} / : QRCodeSVG {...qrCodeProps} /} /div即外层永远是div.ant-qrcode内部根据type只渲染canvas或svg其中之一。因此container.querySelector(canvas)与container.querySelector(svg)是互斥的、可安全使用的定位方式。此外 interface.ts 表明底层还有QRPropsCanvas、QRPropsSvg两种类型定义下载方案无需关心只需面向 DOM 操作。测试验证下载依赖的 DOM 结构仓库测试 components/qr-code/tests/index.test.tsx 印证了上述 DOM 结构约定should correct render断言.ant-qrcode canvas存在support custom size断言 canvas 的宽高与size一致canvas.width 100correct style for wrapper canvas断言外层 div 与 canvas 同步继承style尺寸。这从侧面验证canvas 模式下下载代码拿到的是真实参与绘制的 canvas 元素toDataURL()导出的内容即为用户所见二维码。注意事项与最佳实践1. 跨域图片可能导致 canvas 被污染Tainted Canvas如果icon或组件资源来自跨域且未设置crossOriginanonymouscanvas.toDataURL()会抛出SecurityError。Ant Design 组件内部已为图标设置了crossOrigin: anonymous见 index.tsx但外部环境如页面自身的背景图片、link引入的资源不在组件控制范围内。若出现该异常应确保相关图片资源服务器返回正确的 CORS 响应头。2. svg 下载后及时释放 Object URLURL.createObjectURL生成的地址会占用内存多次下载时应适时调用URL.revokeObjectURL(url)释放。示例为保持简单未做释放生产环境建议在doDownload内部区分处理或使用setTimeout延迟回收。3. 文件名与格式对应canvas 方案产出的是位图 PNG文件名应为QRCode.pngsvg 方案产出矢量图文件名为QRCode.svg。若希望 canvas 方案输出其他格式如 JPEG可传参canvas.toDataURL(image/jpeg, 0.9)。4. 二维码不可扫描时的排查若下载出的二维码无法被识别通常是内容过长导致像素过于密集。可参考 QRCode 组件文档 FAQ通过size增大二维码尺寸或借助短链接服务缩短value内容同时注意errorLevel的选择带icon时不要使用L级。5. 在 TS 项目中的类型安全示例通过QRCodeProps[type]约束状态类型使Segmented的取值与组件type属性严格对齐避免把非法字符串传给组件。这一写法在严格模式下同样适用于你的业务代码。小结Ant Design 的下载二维码方案本质上与组件解耦——组件负责画出来浏览器原生 API 负责存下来。canvas 模式走toDataURL()一步到位svg 模式走serializeToString → Blob → createObjectURL三步转换。将 download.tsx 中的通用函数抽出为downloadQrCode(el, format)工具即可在任何使用 QRCode 组件的业务中一键复用。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考