如何让Android/iOS相机扫描含HTML的二维码并离线在浏览器打开？

核心思路是利用Data URI Scheme，把完整的HTML内容直接嵌入到二维码中，扫描后浏览器无需联网就能解析并显示内容。具体步骤如下：

1. 编写完整的HTML内容 #

先准备好要嵌入的HTML代码，确保结构完整、编码为UTF-8，避免乱码。比如你给出的例子可以写成：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>离线二维码内容</title>
    <style>
        body { margin: 2rem; font-family: sans-serif; }
        h1 { color: #2c3e50; }
    </style>
</head>
<body>
    <h1>Hello this is an offline content opened through the QR Code</h1>
</body>
</html>

如果需要包含图片、样式或脚本，都要把资源转成base64嵌入到HTML里（比如图片用data:image/png;base64,xxx格式），确保完全离线。

2. 转换为Data URI #

把HTML内容编码成符合Data URI格式的字符串，有两种常用方式：

方式一：URL编码 #

使用encodeURIComponent()函数对HTML内容编码，拼接成如下格式：

data:text/html;charset=utf-8,编码后的HTML内容

你可以直接在浏览器控制台执行代码生成：

const htmlContent = `<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>离线二维码内容</title>
    <style>
        body { margin: 2rem; font-family: sans-serif; }
        h1 { color: #2c3e50; }
    </style>
</head>
<body>
    <h1>Hello this is an offline content opened through the QR Code</h1>
</body>
</html>`;
const dataUri = `data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`;
console.log(dataUri);

复制控制台输出的字符串即可。

方式二：Base64编码 #

如果HTML内容较长，Base64编码更节省字符，格式为：

data:text/html;charset=utf-8;base64,Base64编码后的HTML内容

同样可以用浏览器控制台生成：

const htmlContent = `你的HTML代码`;
const base64Str = btoa(unescape(encodeURIComponent(htmlContent)));
const dataUri = `data:text/html;charset=utf-8;base64,${base64Str}`;
console.log(dataUri);

3. 生成二维码 #

用任意离线二维码生成工具（比如本地桌面软件、离线网页工具），把生成的Data URI作为输入内容，生成二维码即可。

注意：二维码有容量限制，普通QR码最多容纳约2500个字符（URL编码）或约3000个字符（Base64编码）。如果内容超出，需要精简HTML（去掉冗余空格、换行，压缩CSS/JS），否则二维码会过于密集，无法被相机识别。

4. 测试扫描 #

用Android或iOS的系统相机扫描二维码，系统会识别出Data URI并提示打开浏览器。点击打开后，浏览器会直接解析嵌入的HTML内容，全程无需联网。

内容的提问来源于stack exchange，提问作者Grego