HTML文件不能直接生成二维码，需先托管于HTTPS服务器获得可访问链接，再用qrcode.js等库将该URL编码为二维码；切勿嵌入超限内容或使用file://、HTTP协议。
HTML 文件本身不能直接“生成二维码”，二维码只能编码字符串（比如 URL 或 base64 文本），所以关键不是上传文件，而是让这个 HTML 可被扫码访问——也就是先托管、再链接、最后编码。
上传后的 HTML 怎么变成可扫码的链接
你上传的 HTML 文件必须能通过 HTTPS 网址访问，否则扫码后打不开。常见错误是把文件丢进 GitHub Pages、Vercel 或 Netlify 后没确认是否部署成功，或用了 file:// 本地路径、HTTP（非 HTTPS）链接。
- GitHub Pages：确保仓库设置里启用了 Pages，且源为
gh-pages分支或/docs文件夹，最终地址形如https://username.github.io/repo/index.html - Vercel/Netlify：上传后会自动分配一个
xxx.vercel.app或xxx.netlify.app域名，检查控制台部署日志有没有 “deploy succeeded” - 自建服务器：确认 Nginx/Apache 已启用 HTTPS，且该 HTML 文件在 Web 根目录下可直访（例如
https://yourdomain.com/cert.html）
用 qrcode.js 一行生成当前页面二维码
只要页面已部署，就可以在该 HTML 文件里嵌入脚本，自动生成指向自身的二维码。注意别在未加载完成时就调用 QRCode：
- 把
<script src="https://cdn.jsdelivr.net/npm/@xkeshi/qrcode@1.0.0/dist/qrcode.min.js"></script>放在</body>前面 - 容器元素必须存在，例如
<div id="qrcode"></div> - 初始化代码写在
<script>块里，且确保 DOM 就绪：new QRCode("qrcode", window.location.href, { width: 256, margin: 16 }) - 不要用
async加载脚本，除非你手动监听onload；否则大概率报QRCode is not defined
为什么扫出来是白屏或 404
这不是二维码画错了，而是目标链接不可达或不兼容。最常踩的三个坑：
立即学习“前端免费学习笔记（深入）”；
-
window.location.href包含localhost或内网 IP：手机扫码无法解析，必须是公网 HTTPS 地址 - HTML 文件名不是
index.html，又没配服务器路由：访问https://site.com/demo会 404，得写成https://site.com/demo.html或配置重定向 - 页面含
<script>但托管平台禁用了执行（如 GitHub Pages 默认允许，但某些静态托管会过滤 inline script）：换成外链 JS，或改用纯静态内容
想让二维码带参数或跳转页怎么办
别把整个 HTML 内容塞进二维码（超 2.9 KB 就大概率扫不出），应该用服务端逻辑或前端拼接 URL：
- 需要区分用户？加查询参数：
https://yoursite.com/cert.html?uid=abc123，前端用new URLSearchParams(location.search).get('uid')读取 - 要防篡改？服务端签发 token，二维码只含
https://yoursite.com/v?token=xxx，由后端校验并跳转真实页面 - 必须嵌入少量数据？先用
btoa(JSON.stringify({name: "张三", certId: "20260921"}))编码，再传给QRCode.toCanvas()，但总长务必压到 2500 字符以内（中文 UTF-8 占 3 字节）
真正难的不是生成二维码，而是让那个链接在任意手机上点开就正常渲染——HTTPS、无跨域限制、首屏不依赖未加载资源、字体和图标 CDN 可达，这些比 width 参数重要得多。
