如何将html 转换成二维码

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>、<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+, '>

二维码不是传输通道，它只是个入口钥匙。真正该塞进去的，永远是能快速定位到内容的那个“地址”。