打印时二维码被截断或模糊，应改用内联SVG生成并设置@media print固定尺寸、禁用缩放、确保URL编码及文档流内定位。
打印页面时二维码被截断或模糊怎么办
直接用 img 标签嵌入网络二维码图片，打印时大概率会因尺寸缩放、DPI适配或浏览器默认打印样式导致二维码无法扫描。根本原因不是二维码生成错了，而是它没被当作「可打印的静态内容」处理——浏览器打印预览常忽略 width/height 的像素值，或把 px 当作屏幕单位强行压缩。
实操建议：
- 用内联 SVG 生成二维码（如通过
qrcode-generator库的createSvgTag方法），避免位图缩放失真 - 给二维码容器加
print媒体查询样式：@media print { .qrcode { width: 100mm !important; height: auto !important; } } - 禁用打印时的背景图形（否则白色底色可能被省略）：
@media print { * { -webkit-print-color-adjust: exact; color-adjust: exact; } } - 不要依赖 CSS
transform: scale()放大二维码——打印引擎通常不渲染 transform 后的位图
用纯前端 JS 在 HTML 页面中动态生成可打印二维码
不依赖后端或外部图片链接，才能确保打印时资源不丢失、不跨域、不延迟。推荐用轻量库 qrcode-generator（仅 4KB），它支持直接输出 SVG 字符串，可插入 DOM 并设为固定尺寸。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 生成时指定
typeNumber = 0（自动计算最小版本），errorCorrectLevel = 'M'（平衡容错与密度） - SVG 必须有显式
viewBox和无单位尺寸（如width="200" height="200"），不能写200px - 插入后立即设置
style.display = 'block'，防止某些浏览器打印时忽略 inline SVG - 示例片段：
const qr = qrcode(0, 'M');<br>qr.addData('https://example.com');<br>qr.make();<br>document.getElementById('qrcode').innerHTML = qr.createSvgTag(5, { margin: 2 });
Chrome/Firefox 打印预览里二维码位置偏移或消失
这是由默认打印边距、分页断点和 position: absolute 元素脱离文档流共同导致的。即使页面显示正常，打印引擎也可能把绝对定位的二维码挤到另一页顶部空白处，甚至整个裁掉。
解决路径：
- 二维码容器必须是文档流内元素（
position: static或relative），且父容器有明确width（如max-width: 80mm） - 在打印样式中重置所有浮动：
@media print { .qrcode { float: none !important; clear: both !important; } } - 避免用
page-break-inside: avoid包裹二维码——它在 Firefox 中反而易触发空白页；改用break-inside: avoid（现代标准） - Chrome 有时会忽略
margin导致紧贴页边，可加@page { margin: 10mm; }统一控制
二维码内容含中文或特殊字符导致打印后扫不出
不是编码问题，而是生成阶段未正确转义。若直接把未处理的 URL（如含 ?、&、中文）传给二维码库，部分库会误解析参数或截断字符串。
务必做两步处理：
- URL 必须用
encodeURIComponent()编码一次（不是两次），例如：const url = 'https://site.com/path?name=' + encodeURIComponent('张三'); - 若使用
qrcode-generator，它内部不自动编码，必须手动包裹；而qrcode.react等 React 封装库通常已处理，但打印时仍建议检查生成后的 SVG<text></text>或<path></path>内容是否含乱码 - 测试方法：打印前右键 →「检查」→ 查看 SVG 源码里
d属性是否包含大量M0,0类异常路径——那是编码失败后生成的空模块
实际最易被忽略的是：打印时浏览器会强制将页面缩放到「适应纸张宽度」，哪怕你写了 width: 200px。所以必须用物理单位（mm 或 cm）配合 @media print 锁定尺寸，且 SVG 本身不能带 px 单位——这点连很多二维码在线生成器都做不到。
