最稳方案是用 qrcode.js 生成指向页面的 url 二维码，而非 html 源码；报 qrcode is not defined 需确保脚本在 dom 后加载或加 defer；扫码白屏因 file:// 协议或相对路径导致，须用完整 https 地址和绝对路径；模糊因 canvas 未适配高 dpi，应设宽高并禁用拉伸；批量静态页用 python qrcode 库生成图片，配合 python -m http.server 托管。
直接用 qrcode.js 在页面里生成 QR 码最稳，别碰“把 HTML 转成二维码”这种伪需求——你扫的不是网页文件，是 URL 字符串；想扫码打开页面，就该生成指向该页面的链接二维码，而不是把整个 HTML 源码塞进去。
qrcode.js 初始化报 QRCode is not defined 怎么办
这是脚本加载时机错了。库没载入完，new QRCode() 就执行了。
- 确保
<script src="qrcode.min.js"></script>放在底部，或加defer属性 - 别在
DOMContentLoaded之前调用，更别写在里直接执行 - 如果用了
async，必须等QRCode全局变量存在再初始化，比如：if (typeof QRCode !== 'undefined') { new QRCode(...) } - 用 ES Module 方式（
import { QRCode } from 'qrcode'）时，确保模块已 resolve，且调用在document.getElementById('container')返回有效 DOM 节点之后
扫码后白屏或 404，URL 是对的但打不开
根本不是二维码画错了，而是目标地址不可访问或路径解析错位。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 绝对禁止用
file://协议双击打开 HTML——手机扫码会拒绝加载，白屏或报failed to load resource - 目标 URL 必须是完整可访问地址，如
https://example.com/page.html?id=123，不能只写page.html或./page.html - 若页面带查询参数，得手动拼全：
window.location.origin + window.location.pathname + window.location.search -
<img src="./style.css">这类相对路径，在扫码跳转后会以扫码设备当前 URL 为基准解析，极易 404；建议全部用绝对路径或<base href="/>%0A
%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%94%9F%E6%88%90%E5%90%8E%E6%A8%A1%E7%B3%8A%E3%80%81%E5%81%8F%E5%B0%8F%E3%80%81%E6%88%96%20logo%20%E8%A6%86%E7%9B%96%E5%A4%B1%E8%B4%A5
%0A%E6%9C%AC%E8%B4%A8%E6%98%AF%20canvas%20%E6%B8%B2%E6%9F%93%E5%AF%86%E5%BA%A6%E5%92%8C%E5%AE%B9%E5%99%A8%E5%B0%BA%E5%AF%B8%E4%B8%8D%E5%8C%B9%E9%85%8D%EF%BC%8C%E4%B8%8D%E6%98%AF%E5%BA%93%E7%9A%84%E9%97%AE%E9%A2%98%E3%80%82
%0A- %0A
qrcode.js%20%E9%BB%98%E8%AE%A4%E8%BE%93%E5%87%BA%20canvas%EF%BC%8C%E4%BD%86%E6%9C%AA%E9%80%82%E9%85%8D%E9%AB%98%20DPI%20%E5%B1%8F%E5%B9%95%EF%BC%9B%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95%EF%BC%9A%E5%88%9D%E5%A7%8B%E5%8C%96%E6%97%B6%E4%BC%A0%20%7B%20width:%20256,%20height:%20256,%20correctLevel:%20QRCode.CorrectLevel.H%20%7D%EF%BC%8C%E5%B9%B6%E7%BB%99%E5%AE%B9%E5%99%A8%E8%AE%BE%20CSS%20width:%20256px;%20height:%20256px;%EF%BC%8C%E9%81%BF%E5%85%8D%E6%8B%89%E4%BC%B8 %0A- %E6%83%B3%E5%8A%A0%20logo%EF%BC%8C%E5%88%AB%E7%9B%B4%E6%8E%A5%E5%BE%80%20canvas%20%E4%B8%8A%20drawImage%E2%80%94%E2%80%94
qrcode.js%20%E4%B8%8D%E6%94%AF%E6%8C%81%EF%BC%9B%E6%94%B9%E7%94%A8%20qrcode-generator%20+%20SVG%20%E6%A8%A1%E5%BC%8F%EF%BC%8C%E6%88%96%E7%94%A8%20html2canvas%20%E6%88%AA%E5%9B%BE%E5%90%88%E6%88%90%EF%BC%88%E4%BD%86%E4%BD%93%E7%A7%AF%E5%A4%A7%E3%80%81%E5%85%BC%E5%AE%B9%E5%B7%AE%EF%BC%89 %0A - %E5%AE%B9%E9%94%99%E7%8E%87%E9%80%89%20
H%EF%BC%88%E6%9C%80%E9%AB%98%EF%BC%89%E6%97%B6%EF%BC%8C%E5%86%85%E5%AE%B9%E9%95%BF%E5%BA%A6%E8%B6%85%E8%BF%87%E7%BA%A6%202KB%EF%BC%8C%E6%89%8B%E6%9C%BA%E6%89%AB%E6%8F%8F%E6%88%90%E5%8A%9F%E7%8E%87%E6%96%AD%E5%B4%96%E4%B8%8B%E8%B7%8C%EF%BC%9B%E8%B6%85%E9%95%BF%E6%96%87%E6%9C%AC%E5%BB%BA%E8%AE%AE%E5%85%88%E7%9F%AD%E9%93%BE%EF%BC%8C%E5%86%8D%E7%94%9F%E6%88%90%E4%BA%8C%E7%BB%B4%E7%A0%81 %0A - %E5%88%AB%E7%94%A8%20
display:%20none%20%E9%9A%90%E8%97%8F%E4%BA%8C%E7%BB%B4%E7%A0%81%E5%AE%B9%E5%99%A8%E2%80%94%E2%80%94%E9%83%A8%E5%88%86%E6%89%AB%E7%A0%81%E5%99%A8%E4%B8%8D%E8%A7%A6%E5%8F%91%E9%87%8D%E7%BB%98%EF%BC%8C%E5%AF%BC%E8%87%B4%20canvas%20%E5%86%85%E5%AE%B9%E4%B8%BA%E7%A9%BA%E7%99%BD %0A
%E8%A6%81%E6%89%B9%E9%87%8F%E7%94%9F%E6%88%90%E9%9D%99%E6%80%81%E8%90%BD%E5%9C%B0%E9%A1%B5%E5%B8%A6%E5%86%85%E5%B5%8C%E4%BA%8C%E7%BB%B4%E7%A0%81%EF%BC%8CPython%20%E6%80%8E%E4%B9%88%E5%86%99
%0A%E9%80%82%E5%90%88%E5%81%9A%E8%AE%BE%E5%A4%87%E8%AF%B4%E6%98%8E%E4%B9%A6%E3%80%81%E6%B4%BB%E5%8A%A8%E5%8D%95%E9%A1%B5%E7%AD%89%E7%A6%BB%E7%BA%BF%E5%9C%BA%E6%99%AF%EF%BC%8C%E5%85%B3%E9%94%AE%E5%9C%A8%E8%B7%AF%E5%BE%84%E6%8B%BC%E6%8E%A5%E5%92%8C%E6%9C%AC%E5%9C%B0%E6%9C%8D%E5%8A%A1%E5%90%AF%E5%8A%A8%E3%80%82
%0A- %0A
- %E7%94%A8%20Python%20%E7%9A%84%20
qrcode%20%E5%BA%93%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%EF%BC%9Aimg%20=%20qrcode.make('https://example.com/page?id=1');%20img.save('qr_1.png')%0A - HTML%20%E6%A8%A1%E6%9D%BF%E9%87%8C%E7%94%A8%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84%E5%BC%95%E7%94%A8%EF%BC%9A
<img%20src=" qr_1.png alt="QR">，不要用../或变量插值 - 路径拼接务必用
os.path.join('output', 'page1.html')，硬拼'./output/' + name + '.html'在 Windows 下会出错 - 生成完别双击打开——仍走
file://；统一用python3 -m http.server 8000启服务，然后访问http://localhost:8000/page1.html - HTML 必须含
<meta name="viewport" content="width=device-width, initial-scale=1">，否则扫码后布局崩塌、文字挤成一团
最常被忽略的点：二维码本身只是个字符串载体，它不负责网络可达性、路径合法性、视口适配或资源加载顺序。问题八成出在 URL 构造和托管方式上，而不是生成逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
