qrcode.js需传HTML字符串而非DOM元素，用outerHTML/innerHTML序列化；防XSS须过滤危险标签；中文乱码因目标页字体缺失；超2953字节应转短链。
用 qrcode.js 直接编码 HTML 字符串（不是整个页面）
HTML 本身不能直接“变成”二维码——二维码只能存文本，所以得先把想表达的 HTML 内容转成字符串，再喂给二维码生成库。qrcode.js 是最轻量、无依赖的选择，适合浏览器端快速生成。
常见错误是传入 DOM 元素（比如 document.body），结果二维码里只显示 [object HTMLBodyElement]。必须手动序列化：
- 用
element.outerHTML获取完整 HTML 字符串（含标签） - 用
element.innerHTML获取内部 HTML（不含外层容器） - 如果 HTML 含换行或双引号，不用额外转义——
qrcode.js内部会处理
const htmlStr = document.getElementById('card').outerHTML;
QRCode.toCanvas(canvasEl, htmlStr, { width: 256 });
服务端生成时别直接传原始 HTML（XSS 风险）
如果后端用 qrcode（Node.js）、qrcodegen（Python）等生成，传原始 HTML 字符串可能埋下 XSS 隐患——二维码扫出来是网页，而那个网页又执行了你传进去的 script 标签。
安全做法是：先提取关键信息，再构造最小可用 HTML：
立即学习“前端免费学习笔记（深入）”；
- 避免传
<script></script>、<iframe></iframe>、onerror=等危险片段 - 用
DOMPurify.sanitize()过滤后再编码（前端预处理） - 服务端建议只允许白名单标签，比如仅
<b></b>、<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<br>
例如用户提交的卡片 HTML 是：<div onclick="alert(1)">点我</div>，生成前必须剔除 onclick 属性。
toDataURL() 导出图片时中文乱码？其实是字体问题
用 qrcode.toDataURL() 得到 base64 图片，再插入 <img alt="如何将html 转换成二维码" > 显示，如果原始 HTML 含中文，二维码内容本身不会乱码，但扫码后打开的网页若没指定字体，可能在某些安卓机上显示方块。
这不是二维码的问题，而是目标页面渲染环境缺失中文字体。解决方式很直接：
- 确保你编码的 HTML 字符串里包含
<meta charset="utf-8"> - 内联
<style>body{font-family:sans-serif}</style>（系统默认中文字体更稳） - 避免用
font-family: 'PingFang SC'这类 iOS 专属字体
乱码从来不在二维码里，而在扫码后加载的那页 HTML 的渲染环节。
长 HTML 超过 2953 字节就扫不出来
QR Code 的容量有硬限制：Version 40（最大尺寸）在 UTF-8 模式下最多存 2953 字节。一个带样式的 <div> 很容易突破这个数。
<p>实测发现，只要字符串长度 > 2900 字节，部分扫码器（尤其是微信）就开始失败。应对策略不是“加大纠错等级”，而是精简内容：</p>
<ul>
<li>删空格、换行、注释：<code>htmlStr.replace(/>\s+, '>
https://a.co/xyz），再对短链编码——把复杂 HTML 放服务端渲染二维码不是传输通道，它只是个入口钥匙。真正该塞进去的，永远是能快速定位到内容的那个“地址”。
