amis QRCode 二维码组件完全指南JSON 配置、样式定制与下载导出实战【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis本文围绕 amis 前端低代码框架中的qr-code二维码渲染器展开系统讲解如何在 JSON Schema 中快速生成二维码并深度覆盖背景/前景色、纠错等级、内嵌 Logo 图片、码眼与码点样式定制以及基于事件动作的二维码下载导出等实战能力。读完本文你将掌握 amis 二维码组件的全部配置属性与底层实现原理可直接在表单、详情页或业务看板中落地使用。组件概述与基本用法在 amis 中二维码组件通过type: qr-code声明其核心职责是把一段文本或 URL 编码为可扫描的二维码图形。从源码 QRCode.tsx 可以看到渲染器注册为type: qrcode并提供别名qr-code两种写法均有效文档与示例统一推荐使用qr-code。最简单的用法只需要提供value与codeSize两个字段{ type: qr-code, codeSize: 128, value: https://www.baidu.com }value扫描二维码后显示的文本内容若要跳转页面必须填写以http://或https://开头的完整 URL并且该字段支持 amis 模板语法可引用上下文变量详见下文嵌入图片一节的关联上下文变量。codeSize二维码的宽高默认128单位 px可理解为整个二维码图形的边长。需要特别说明的是内容长度限制根据 QR 码国际标准二进制模式最多可存储2953字节1 个中文汉字占 2 字节。这一限制并不仅仅是文档提示而是被硬编码进了组件实现——在 QRCode.tsx 的渲染逻辑中当finalValue.length 2953时组件不会渲染二维码而是直接显示本地化错误提示QRCode.tooLong文案形如内容超过 2953 字节。因此生成二维码前建议先预估内容体积尤其是包含长中文文本的场景。另外当value为空时组件会渲染一个占位符默认占位内容为-由placeholder属性控制默认值见 QRCode.tsx 的defaultProps。配置背景色与前景色二维码由背景和前景码点/码眼两部分构成二者可分别独立配置颜色。背景色 backgroundColor背景色默认为#fff纯白色通过backgroundColor属性修改[ { type: qr-code, codeSize: 128, backgroundColor: #108cee, foregroundColor: #000, value: https://www.baidu.com } ]前景色 foregroundColor前景色默认为#000纯黑色通过foregroundColor属性修改[ { type: qr-code, codeSize: 128, backgroundColor: #fff, foregroundColor: #108cee, value: https://www.baidu.com } ]从实现层面看这两个属性最终会作为styleConfig.bgColor与styleConfig.color传入底层二维码渲染库qrcode-react-next见 QRCode.tsx。测试用例 QRCode.test.tsx 验证了在 svg 渲染模式下背景色会写入 SVG 根节点的background-color样式前景色会写入码点元素的fill属性二者互不影响。配色实践提示二维码识别依赖码点与背景之间的明暗对比建议保持深色前景 浅色背景的组合过度接近的配色如浅灰前景 白背景可能导致扫码失败。纠错等级 level二维码具备容错能力即使部分图形被遮挡、污损或印制模糊只要损坏程度在纠错能力范围内依然可以被正常识别。level属性用于设置纠错等级共四种从左到右纠错能力依次提升等级容错能力适用场景L约 7%默认值适合无遮挡、打印清晰的场景M约 15%一般场景Q约 25%推荐用于内嵌图片Logo的场景H约 30%遮挡风险高的场景默认等级为L见 QRCode.tsx 的defaultProps与 属性表。一个直观的对比如下——同一内容分别使用 L/M/Q/H 四种等级渲染{ type: hbox, columns: [ { type: qr-code, codeSize: 128, level: L, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: M, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: H, value: https://www.baidu.com } ] }值得注意的是源码中向渲染库传入的配置除了level外还包含了minVersion: 2与boostLevel: true见 QRCode.tsx。boostLevel表示在内容允许的情况下自动提升纠错等级minVersion: 2则规定了二维码符号的最小版本这保证了生成结果在图形尺寸与纠错冗余上有更稳定的表现。嵌入图片Logo 水印二维码中间可以嵌入一张图片例如品牌 Logo通过imageSettings对象配置该能力自1.10.0版本起支持。基础用法 srcimageSettings.src设置图片链接地址图片尺寸默认取二维码大小的10%位置默认水平、垂直居中{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, } }强烈建议嵌入图片会遮挡部分码点请根据图片大小适当调高level纠错等级一般建议至少Q避免图片遮挡导致二维码无法被正确识别。关联上下文变量imageSettings.src支持 amis 模板/变量语法可以引用页面数据域中的值。下面的示例在页面data中声明了imgSrc变量图片地址通过${imgSrc}动态注入同时显式指定了图片宽高{ type: page, data: { imgSrc: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg }, body: { type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { width: 50, height: 30, src: ${imgSrc} } } }这个变量解析逻辑有明确的源码支撑在 QRCode.tsx 的getImageSettings()方法中组件会通过isPureVariable检测src是否为变量表达式若是则调用resolveVariableAndFilter(src, data, | raw)从当前数据域中解析出真实地址。同时width、height、x、y这四个数值型配置还会经过isNumeric校验并转换为Number以兼容从数据域中取到的字符串数值。图片宽高width和height可以显式设置图片的宽度和高度不设置时默认各为codeSize的 10%{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, width: 50, height: 30 } }图片偏移量 x / y默认情况下图片水平、垂直居中。如需调整位置以二维码左上角为原点用x设置水平偏移量、y设置垂直偏移量。下面的示例通过codeSize128与图片的width50、height30推算出偏移量{x: 78, y: 98}使图片位于右下角{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, width: 50, height: 30, x: 78, y: 98 } }偏移量的推算逻辑可以这样理解以 128×128 的二维码为例图片宽 50、高 30若想贴到右下角x 应为128 - 50 - 某边距、y 应为128 - 30 - 某边距示例中的 78 与 98 即按此思路留出边距后计算得到。svg 模式下测试用例 QRCode.test.tsx 会断言图片节点image的x、y、width、height属性均大于 0验证偏移与尺寸配置确实生效。imageSettings 汇总属性类型默认值说明srcstring-图片链接地址支持${var}变量widthnumbercodeSize的 10%图片宽度heightnumbercodeSize的 10%图片高度xnumber水平居中图片水平偏移量左上角为原点ynumber垂直居中图片垂直偏移量左上角为原点源码中的QRCodeImageSettings接口还包含一个excavate: boolean字段见 QRCode.tsx表示是否挖空图片覆盖区域的码点以提升识别率从类型定义看该能力由底层渲染库提供。码眼与码点样式定制从 1.x 起amis 二维码组件支持对码眼二维码四角的定位图案和码点承载数据的小方块进行个性化定制可用于品牌化二维码的外观设计。所有样式属性最终都会透传给底层渲染库的styleConfig见 QRCode.tsx。码眼类型eyeType可配置default、rounded、circle码眼边框大小eyeBorderSize可配置default、sm、xs码眼边框颜色eyeBorderColor与内部颜色eyeInnerColor可分别配置默认使用foregroundColor码点类型pointType可配置default、circle码点大小pointSize可配置default、sm、xs码点大小随机pointSizeRandom布尔值开启后各码点大小会随机变化营造更自然的视觉风格完整效果对照示例{ type: page, body: [{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: rounded }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: circle } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderSize: sm }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderSize: xs } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderColor: red }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeInnerColor: blue } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointType: circle } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointSize: sm }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointSize: xs } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: rounded, eyeBorderSize: sm, pointType: circle, pointSizeRandom: true } ] }] }设计提醒码眼是扫码设备定位二维码的关键图案对其做样式改造尤其是颜色与形状时请确保仍保留足够的结构对比度并进行真机扫码验证。下载二维码saveAs 动作自3.6.0版本起二维码组件支持通过 amis 事件动作体系导出下载。其原理是给二维码组件设置一个id然后在其他组件如按钮的onEvent中触发saveAs动作并指定该componentId即可把二维码保存为本地图片文件。[ { type: action, label: 下载二维码, onEvent: { click: { actions: [ { actionType: saveAs, componentId: qr-code-download, args: { name: download.png } } ] } } }, { type: qr-code, id: qr-code-download, codeSize: 128, value: https://www.baidu.com } ]关键配置拆解componentId目标二维码组件的id必须与qr-code上的id一一对应args.name下载文件的文件名可选。传入.png后缀时导出 PNG 图片不传时默认文件名为qr-code.png。需要注意该下载方式不支持嵌入图片的二维码如果二维码配置了imageSettings建议直接对页面截图保存。从源码看saveAs动作在 QRCode.tsx 的doAction中实现且与mode渲染模式密切相关canvas 模式默认获取容器内的canvas元素调用toBlob(..., image/png)生成 PNG 文件后通过saveAs下载若args.name以.svg结尾还会被自动替换为.png见 QRCode.tsx。svg 模式读取容器内svg的innerHTML重新包裹上带命名空间与viewBox的外层svg后以image/svgxml类型生成 Blob 下载默认文件名为qr-code.svg见 QRCode.tsx。因此实际下载得到的是 PNGcanvas 模式还是 SVGsvg 模式文件取决于当前组件的mode配置。关于事件动作的通用触发机制actionTypecomponentIdargs可进一步参考 amis 的 事件动作文档。属性表以下为 QRCode 组件的完整属性清单与文档属性表保持一致并结合源码补充了部分实现细节属性名类型默认值说明typestringqr-code指定为 QRCode 渲染器源码别名qrcode亦可用modestringcanvas渲染模式有canvas和svg两种classNamestring外层 Dom 的类名qrcodeClassNamestring二维码的类名codeSizenumber128二维码的宽高大小backgroundColorstring#fff二维码背景色foregroundColorstring#000二维码前景色levelstringL二维码纠错级别有L M Q H四种value模板https://www.baidu.com扫描二维码后显示的文本如果要显示某个页面请输入完整 urlhttp://...或https://...开头支持使用模板imageSettingsobjectQRCode 图片配置imageSettings.srcstring图片链接地址imageSettings.widthnumber默认为codeSize的 10%图片宽度imageSettings.heightnumber默认为codeSize的 10%图片高度imageSettings.xnumber默认水平居中图片水平方向偏移量imageSettings.ynumber默认垂直居中图片垂直方向偏移量eyeTypestringdefault码眼类型有default、circle、rounded三种eyeBorderColorstring#000000码眼边框颜色eyeBorderSizestringdefault码眼边框大小有default、sm、xs三种eyeInnerColorstring#000000码眼内部颜色pointTypestringdefault码点类型有default、circle两种pointSizestringdefault码点大小有default、sm、xs三种pointSizeRandombooleanfalse码点大小随机除上表外从 AMISQRCodeSchema 的类型定义还可以看到两个文档表格未列出的实用属性namestring关联字段名可用于在表单中与数据字段绑定placeholderstring默认-value为空时展示的占位内容。动作表当前组件对外暴露以下特性动作其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数详细请查看事件动作。动作名称动作配置说明saveAsname?: string文件名下载文档附渲染模式与测试验证mode决定二维码最终的输出载体默认canvas可切换为svg。两种模式在 QRCode.test.tsx 中均有覆盖svg 模式断言渲染出svg节点且backgroundColor以background-color样式呈现、foregroundColor以fill属性呈现QRCode.test.tsx嵌入图片断言image节点存在、xlink:href已设置且x/y/width/height均大于 0QRCode.test.tsxcanvas 模式默认渲染canvas节点并对toDataURL输出的图片数据进行了断言QRCode.test.tsx。SnapShot 文件 QRCode.test.tsx.snap 中也保留了三种 svg 场景默认、自定义颜色、嵌入图片的完整 DOM 结构快照可作为理解组件实际输出结构的参考。选择建议需要位图导出PNG时使用默认的canvas模式需要无损矢量输出、便于放大或二次加工时选择svg模式但需注意svg模式下saveAs下载的是.svg文件。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
amis QRCode 二维码组件完全指南JSON 配置、样式定制与下载导出实战【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis本文围绕 amis 前端低代码框架中的qr-code二维码渲染器展开系统讲解如何在 JSON Schema 中快速生成二维码并深度覆盖背景/前景色、纠错等级、内嵌 Logo 图片、码眼与码点样式定制以及基于事件动作的二维码下载导出等实战能力。读完本文你将掌握 amis 二维码组件的全部配置属性与底层实现原理可直接在表单、详情页或业务看板中落地使用。组件概述与基本用法在 amis 中二维码组件通过type: qr-code声明其核心职责是把一段文本或 URL 编码为可扫描的二维码图形。从源码 QRCode.tsx 可以看到渲染器注册为type: qrcode并提供别名qr-code两种写法均有效文档与示例统一推荐使用qr-code。最简单的用法只需要提供value与codeSize两个字段{ type: qr-code, codeSize: 128, value: https://www.baidu.com }value扫描二维码后显示的文本内容若要跳转页面必须填写以http://或https://开头的完整 URL并且该字段支持 amis 模板语法可引用上下文变量详见下文嵌入图片一节的关联上下文变量。codeSize二维码的宽高默认128单位 px可理解为整个二维码图形的边长。需要特别说明的是内容长度限制根据 QR 码国际标准二进制模式最多可存储2953字节1 个中文汉字占 2 字节。这一限制并不仅仅是文档提示而是被硬编码进了组件实现——在 QRCode.tsx 的渲染逻辑中当finalValue.length 2953时组件不会渲染二维码而是直接显示本地化错误提示QRCode.tooLong文案形如内容超过 2953 字节。因此生成二维码前建议先预估内容体积尤其是包含长中文文本的场景。另外当value为空时组件会渲染一个占位符默认占位内容为-由placeholder属性控制默认值见 QRCode.tsx 的defaultProps。配置背景色与前景色二维码由背景和前景码点/码眼两部分构成二者可分别独立配置颜色。背景色 backgroundColor背景色默认为#fff纯白色通过backgroundColor属性修改[ { type: qr-code, codeSize: 128, backgroundColor: #108cee, foregroundColor: #000, value: https://www.baidu.com } ]前景色 foregroundColor前景色默认为#000纯黑色通过foregroundColor属性修改[ { type: qr-code, codeSize: 128, backgroundColor: #fff, foregroundColor: #108cee, value: https://www.baidu.com } ]从实现层面看这两个属性最终会作为styleConfig.bgColor与styleConfig.color传入底层二维码渲染库qrcode-react-next见 QRCode.tsx。测试用例 QRCode.test.tsx 验证了在 svg 渲染模式下背景色会写入 SVG 根节点的background-color样式前景色会写入码点元素的fill属性二者互不影响。配色实践提示二维码识别依赖码点与背景之间的明暗对比建议保持深色前景 浅色背景的组合过度接近的配色如浅灰前景 白背景可能导致扫码失败。纠错等级 level二维码具备容错能力即使部分图形被遮挡、污损或印制模糊只要损坏程度在纠错能力范围内依然可以被正常识别。level属性用于设置纠错等级共四种从左到右纠错能力依次提升等级容错能力适用场景L约 7%默认值适合无遮挡、打印清晰的场景M约 15%一般场景Q约 25%推荐用于内嵌图片Logo的场景H约 30%遮挡风险高的场景默认等级为L见 QRCode.tsx 的defaultProps与 属性表。一个直观的对比如下——同一内容分别使用 L/M/Q/H 四种等级渲染{ type: hbox, columns: [ { type: qr-code, codeSize: 128, level: L, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: M, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, level: H, value: https://www.baidu.com } ] }值得注意的是源码中向渲染库传入的配置除了level外还包含了minVersion: 2与boostLevel: true见 QRCode.tsx。boostLevel表示在内容允许的情况下自动提升纠错等级minVersion: 2则规定了二维码符号的最小版本这保证了生成结果在图形尺寸与纠错冗余上有更稳定的表现。嵌入图片Logo 水印二维码中间可以嵌入一张图片例如品牌 Logo通过imageSettings对象配置该能力自1.10.0版本起支持。基础用法 srcimageSettings.src设置图片链接地址图片尺寸默认取二维码大小的10%位置默认水平、垂直居中{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, } }强烈建议嵌入图片会遮挡部分码点请根据图片大小适当调高level纠错等级一般建议至少Q避免图片遮挡导致二维码无法被正确识别。关联上下文变量imageSettings.src支持 amis 模板/变量语法可以引用页面数据域中的值。下面的示例在页面data中声明了imgSrc变量图片地址通过${imgSrc}动态注入同时显式指定了图片宽高{ type: page, data: { imgSrc: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg }, body: { type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { width: 50, height: 30, src: ${imgSrc} } } }这个变量解析逻辑有明确的源码支撑在 QRCode.tsx 的getImageSettings()方法中组件会通过isPureVariable检测src是否为变量表达式若是则调用resolveVariableAndFilter(src, data, | raw)从当前数据域中解析出真实地址。同时width、height、x、y这四个数值型配置还会经过isNumeric校验并转换为Number以兼容从数据域中取到的字符串数值。图片宽高width和height可以显式设置图片的宽度和高度不设置时默认各为codeSize的 10%{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, width: 50, height: 30 } }图片偏移量 x / y默认情况下图片水平、垂直居中。如需调整位置以二维码左上角为原点用x设置水平偏移量、y设置垂直偏移量。下面的示例通过codeSize128与图片的width50、height30推算出偏移量{x: 78, y: 98}使图片位于右下角{ type: qr-code, codeSize: 128, level: Q, value: https://www.baidu.com, imageSettings: { src: https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpegs_0,w_216,l_1,f_jpg, width: 50, height: 30, x: 78, y: 98 } }偏移量的推算逻辑可以这样理解以 128×128 的二维码为例图片宽 50、高 30若想贴到右下角x 应为128 - 50 - 某边距、y 应为128 - 30 - 某边距示例中的 78 与 98 即按此思路留出边距后计算得到。svg 模式下测试用例 QRCode.test.tsx 会断言图片节点image的x、y、width、height属性均大于 0验证偏移与尺寸配置确实生效。imageSettings 汇总属性类型默认值说明srcstring-图片链接地址支持${var}变量widthnumbercodeSize的 10%图片宽度heightnumbercodeSize的 10%图片高度xnumber水平居中图片水平偏移量左上角为原点ynumber垂直居中图片垂直偏移量左上角为原点源码中的QRCodeImageSettings接口还包含一个excavate: boolean字段见 QRCode.tsx表示是否挖空图片覆盖区域的码点以提升识别率从类型定义看该能力由底层渲染库提供。码眼与码点样式定制从 1.x 起amis 二维码组件支持对码眼二维码四角的定位图案和码点承载数据的小方块进行个性化定制可用于品牌化二维码的外观设计。所有样式属性最终都会透传给底层渲染库的styleConfig见 QRCode.tsx。码眼类型eyeType可配置default、rounded、circle码眼边框大小eyeBorderSize可配置default、sm、xs码眼边框颜色eyeBorderColor与内部颜色eyeInnerColor可分别配置默认使用foregroundColor码点类型pointType可配置default、circle码点大小pointSize可配置default、sm、xs码点大小随机pointSizeRandom布尔值开启后各码点大小会随机变化营造更自然的视觉风格完整效果对照示例{ type: page, body: [{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: rounded }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: circle } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderSize: sm }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderSize: xs } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeBorderColor: red }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeInnerColor: blue } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointType: circle } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointSize: sm }, { type: qr-code, codeSize: 128, value: https://www.baidu.com, pointSize: xs } ] },{ type: hbox, columns: [ { type: qr-code, codeSize: 128, value: https://www.baidu.com, eyeType: rounded, eyeBorderSize: sm, pointType: circle, pointSizeRandom: true } ] }] }设计提醒码眼是扫码设备定位二维码的关键图案对其做样式改造尤其是颜色与形状时请确保仍保留足够的结构对比度并进行真机扫码验证。下载二维码saveAs 动作自3.6.0版本起二维码组件支持通过 amis 事件动作体系导出下载。其原理是给二维码组件设置一个id然后在其他组件如按钮的onEvent中触发saveAs动作并指定该componentId即可把二维码保存为本地图片文件。[ { type: action, label: 下载二维码, onEvent: { click: { actions: [ { actionType: saveAs, componentId: qr-code-download, args: { name: download.png } } ] } } }, { type: qr-code, id: qr-code-download, codeSize: 128, value: https://www.baidu.com } ]关键配置拆解componentId目标二维码组件的id必须与qr-code上的id一一对应args.name下载文件的文件名可选。传入.png后缀时导出 PNG 图片不传时默认文件名为qr-code.png。需要注意该下载方式不支持嵌入图片的二维码如果二维码配置了imageSettings建议直接对页面截图保存。从源码看saveAs动作在 QRCode.tsx 的doAction中实现且与mode渲染模式密切相关canvas 模式默认获取容器内的canvas元素调用toBlob(..., image/png)生成 PNG 文件后通过saveAs下载若args.name以.svg结尾还会被自动替换为.png见 QRCode.tsx。svg 模式读取容器内svg的innerHTML重新包裹上带命名空间与viewBox的外层svg后以image/svgxml类型生成 Blob 下载默认文件名为qr-code.svg见 QRCode.tsx。因此实际下载得到的是 PNGcanvas 模式还是 SVGsvg 模式文件取决于当前组件的mode配置。关于事件动作的通用触发机制actionTypecomponentIdargs可进一步参考 amis 的 事件动作文档。属性表以下为 QRCode 组件的完整属性清单与文档属性表保持一致并结合源码补充了部分实现细节属性名类型默认值说明typestringqr-code指定为 QRCode 渲染器源码别名qrcode亦可用modestringcanvas渲染模式有canvas和svg两种classNamestring外层 Dom 的类名qrcodeClassNamestring二维码的类名codeSizenumber128二维码的宽高大小backgroundColorstring#fff二维码背景色foregroundColorstring#000二维码前景色levelstringL二维码纠错级别有L M Q H四种value模板https://www.baidu.com扫描二维码后显示的文本如果要显示某个页面请输入完整 urlhttp://...或https://...开头支持使用模板imageSettingsobjectQRCode 图片配置imageSettings.srcstring图片链接地址imageSettings.widthnumber默认为codeSize的 10%图片宽度imageSettings.heightnumber默认为codeSize的 10%图片高度imageSettings.xnumber默认水平居中图片水平方向偏移量imageSettings.ynumber默认垂直居中图片垂直方向偏移量eyeTypestringdefault码眼类型有default、circle、rounded三种eyeBorderColorstring#000000码眼边框颜色eyeBorderSizestringdefault码眼边框大小有default、sm、xs三种eyeInnerColorstring#000000码眼内部颜色pointTypestringdefault码点类型有default、circle两种pointSizestringdefault码点大小有default、sm、xs三种pointSizeRandombooleanfalse码点大小随机除上表外从 AMISQRCodeSchema 的类型定义还可以看到两个文档表格未列出的实用属性namestring关联字段名可用于在表单中与数据字段绑定placeholderstring默认-value为空时展示的占位内容。动作表当前组件对外暴露以下特性动作其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数详细请查看事件动作。动作名称动作配置说明saveAsname?: string文件名下载文档附渲染模式与测试验证mode决定二维码最终的输出载体默认canvas可切换为svg。两种模式在 QRCode.test.tsx 中均有覆盖svg 模式断言渲染出svg节点且backgroundColor以background-color样式呈现、foregroundColor以fill属性呈现QRCode.test.tsx嵌入图片断言image节点存在、xlink:href已设置且x/y/width/height均大于 0QRCode.test.tsxcanvas 模式默认渲染canvas节点并对toDataURL输出的图片数据进行了断言QRCode.test.tsx。SnapShot 文件 QRCode.test.tsx.snap 中也保留了三种 svg 场景默认、自定义颜色、嵌入图片的完整 DOM 结构快照可作为理解组件实际输出结构的参考。选择建议需要位图导出PNG时使用默认的canvas模式需要无损矢量输出、便于放大或二次加工时选择svg模式但需注意svg模式下saveAs下载的是.svg文件。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
