将HTML转换成二维码，需要先明确最终目的：扫码后是查看源码文本，还是打开一个可以交互的页面。两条路径在编码方式、容量限制和工具选择上都不一样。二维码本质上只能携带一串文本，HTML源码或URL都是文本，但长度和可导航性直接决定方案。
一、先弄清二维码容量：HTML源码能直接塞进去吗
QR码有40个版本，版本越高模块越多，能容纳的数据也越多。日常使用的版本通常在5到10之间，而最大版本40在低纠错等级下，字节模式最多只能放入约2953个字节。HTML源码如果只包含一个非常简单的页面骨架，例如<!DOCTYPE html><html><body>hello</body></html>，长度不到100字节，完全可以放入。但实际项目中的HTML往往包含内联CSS、JavaScript和大量标签，动辄十几KB甚至上百KB，此时直接生成二维码会超出容量，或者二维码过于密集导致手机无法识别。
另外，纠错等级会影响容量。L级可恢复约7%的损坏，M级约15%，Q级约25%，H级约30%。纠错能力越强，留给数据的空间就越少。如果HTML内容接近极限，应优先选择L级。二维码的编码模式也很关键：纯数字容量最大，字母数字次之，字节模式适合HTML，但容量最小。下表列出了版本40-L下不同模式的理论最大容量。
| 编码模式 | 最大容量 |
|---|---|
| 数字 | 7089字符 |
| 字母数字 | 4296字符 |
| 字节 | 2953字节 |
| 汉字 | 1817字符 |
因此在动手生成之前，先计算HTML内容编码为UTF-8后的字节长度，可以避免生成后才发现扫码失败。下面这段JavaScript可以快速得到结果。
const html = '<div>这里是HTML源码</div>';
const bytes = new TextEncoder().encode(html);
console.log('字节长度:', bytes.length); // 如果超过2500，建议压缩或改用短链接
二、前端离线方案：用qrcode.js直接生成源码二维码
如果HTML体积不大，并且需求只是分享源码文本，前端生成是最轻量的方案。qrcodejs是一个常见的浏览器端库，不需要构建工具，直接在页面中引入即可。它的原理是把传入的字符串编码成二维码矩阵，然后绘制到<canvas>或<img>元素上。用户在页面中粘贴HTML，点击按钮后生成二维码，另一台设备扫码即可在文本模式中看到源码。
下面是一个完整可运行的示例。页面包含一个<textarea>输入框、一个按钮和一个展示二维码的容器。生成前先检查长度，避免超出二维码容量导致图像复杂度过高。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML转二维码</title>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
</head>
<body>
<textarea id="htmlInput" rows="10" cols="60" placeholder="粘贴HTML源码"></textarea>
<button id="generateBtn">生成二维码</button>
<div id="qrcode"></div>
<script>
const btn = document.getElementById('generateBtn');
btn.addEventListener('click', () => {
const htmlText = document.getElementById('htmlInput').value;
const charCount = new TextEncoder().encode(htmlText).length;
if (charCount > 2500) {
alert('内容过长，建议压缩或改用短链接方案');
return;
}
document.getElementById('qrcode').innerHTML = '';
new QRCode(document.getElementById('qrcode'), {
text: htmlText,
width: 256,
height: 256,
correctLevel: QRCode.CorrectLevel.L
});
});
</script>
</body>
</html>
这个方案完全在浏览器本地运行，不会上传HTML内容，适合代码片段分享、离线工具或内部调试场景。但需要注意的是，扫码工具通常把二维码内容当作纯文本处理，用户看到的是HTML标签，而不是浏览器渲染后的页面。如果希望扫码后直接打开网页，就需要改变二维码里的内容形式。
还有一个细节：不同的扫码应用对字数较多的二维码识别能力不一致，部分应用会限制显示长度。实际测试时最好用多台设备扫一遍，尤其是内容接近2000字节时。可以把纠错等级固定为L，并适当增大二维码尺寸到300像素以上，降低识别难度。
三、让扫码后打开渲染页面：Data URL与短链接
浏览器可以导航到一个Data URL，例如data:text/html;charset=utf-8,...。如果把HTML编码进Data URL，扫码后系统会提示用浏览器打开，浏览器会把这个Data URL当作地址加载，最终渲染出页面。这种方式不需要服务器，但Data URL的长度会随着HTML内容线性增长，而且URL编码会把部分字符变成百分号形式，实际占用字节更多。只有非常短小的HTML片段才适合使用Data URL。
下面的示例把一段简单HTML包装成Data URL，再交给二维码库生成。注意encodeURIComponent负责处理中文字符和特殊符号。
const html = `<h1>Hello</h1><p>来自二维码的页面</p>`;
const dataUrl = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);
new QRCode(document.getElementById('qrcode'), {
text: dataUrl,
width: 300,
height: 300,
correctLevel: QRCode.CorrectLevel.L
});
当HTML变大时，更合理的做法是把它保存到服务器上，生成一个短链接，然后对短链接生成二维码。这样二维码携带的内容只是几十个字符的URL，无论原始HTML多大都不受影响。Node.js可以快速实现这个接口：接收HTML文本，写入文件，返回访问地址和二维码图片。下面代码展示了核心流程。
const express = require('express');
const crypto = require('crypto');
const fs = require('fs');
const path = require('path');
const QRCode = require('qrcode');
const app = express();
app.use(express.text({ type: 'text/html', limit: '1mb' }));
app.post('/html-to-qr', async (req, res) => {
const id = crypto.randomBytes(8).toString('hex');
const filePath = path.join(__dirname, 'pages', id + '.html');
fs.writeFileSync(filePath, req.body);
const url = 'https://ipipp.com/pages/' + id + '.html';
const qrDataUrl = await QRCode.toDataURL(url, { width: 400, errorCorrectionLevel: 'L' });
res.json({ id, url, qrDataUrl });
});
app.listen(3000);
该方案还可以进一步扩展：为每个二维码设置访问次数或有效期，在返回HTML前检查权限；或者把HTML存储到对象存储中，避免占用服务器磁盘。优点很明显，扫码后手机直接进入普通网页，样式、脚本、响应式布局都能正常工作。缺点是必须部署服务端，并且二维码依赖网络访问，离线状态下无法打开。
四、压缩HTML源码：把更多内容塞进二维码
如果既不想依赖服务器，又希望二维码携带尽可能多的HTML内容，压缩是绕不开的一步。HTML文本通常有大量重复标签和空白字符，这些冗余非常适合用gzip算法消除。压缩后的二进制数据不能直接放进二维码，因为字符串经过JSON或文本传输时会出现编码问题，所以常见做法是转成Base64字符串。Base64会让体积增加约33%，但gzip对HTML的压缩率通常能达到60%到80%，整体仍能明显减小。
下面的Node.js代码演示了gzip压缩HTML再生成二维码的过程。压缩结果只适合程序读取，扫码后会得到一串Base64文本，接收方需要先用Base64解码，再用gzip解压才能恢复原始HTML。
const zlib = require('zlib');
const QRCode = require('qrcode');
function compressHtml(html) {
const gz = zlib.gzipSync(Buffer.from(html, 'utf8'));
return gz.toString('base64');
}
const html = `<div><p>一段比较长的HTML内容</p></div>`;
const compressed = compressHtml(html);
console.log('原始长度', html.length, '压缩后Base64长度', compressed.length);
QRCode.toDataURL(compressed, { errorCorrectionLevel: 'L' }).then(url => {
console.log('二维码DataURL已生成');
});
除了gzip，还可以在压缩前手动移除HTML中的注释、缩进和多余空格。如果CSS和JavaScript是内联的，可以用短变量名替换长类名，但需要保证可读性不受太大影响。这些预处理手段和压缩算法叠加，往往能让一个十几KB的页面缩减到二维码容量范围内。
不过需要明确：压缩后的内容脱离了解码工具就无法直接查看，因此在分享时需要同时告诉对方解码方式，或者把解压逻辑做成一个小工具。如果使用场景是面向普通用户，短链接方案仍然更友好。压缩方案更适合内部传输、自动化脚本或技术交流。
把HTML转换成二维码并没有一种通用答案，关键在于内容大小和扫码后的使用方式。小片段可以在前端直接生成，要求渲染效果就改用Data URL，大体积内容走短链接路线，离线传输则借助压缩和Base64。先测量字节长度，再选择合适的编码方式，可以避免二维码过密无法识别的问题。