浏览器标签打印避坑：CSS @page失效与JS动态布局兜底方案

上个月接了一个标签打印需求，规格是60×40mm，每张标签上要打二维码、品名和条码。方案定的是纯前端，不装客户端，直接用浏览器打印能力输出。这种方案在Web前端领域不算稀奇，但奇怪的是，我在样式表里写了@page { size: 60mm 40mm; margin: 0; }，打印预览里显示出来的却是A4纸，标签内容被拉到页面左上角，比例完全不对。我当时的第一反应是CSS写错了，反复检查语法也没有任何问题，后来花了整整两天才把问题彻底解决。这篇博文就把整个踩坑过程和最终落地的自适应打印方案完整记录下来，给正在做Web前端标签打印的同学一个参考。

如果你想做的只是偶尔打一张A4报告，这篇文章可能用不上。但如果你也是做标签、吊牌、面单这类需要精确物理尺寸的打印，那@page size这个坎，大概率你也会遇到。

1. 标签打印为什么绕不开@page

1.1 标签打印和普通网页打印的本质差异

普通网页打印，比如打印一篇文档、一张订单详情，我们对物理尺寸没那么敏感。A4纸多宽少宽无所谓，内容按流式排版，超出部分翻页就行。但标签打印完全不是这样。

标签纸是固定规格的，60×40mm就是60×40mm，多1mm都会导致内容跑到相邻标签上。而且标签通常是不干胶纸，一张A4纸上排了很多枚小标签，打印时每一枚标签都必须刚好落在对应位置上。这要求浏览器必须知道“当前这一页到底有多大”。而CSS里能控制页面尺寸的标准方式，就是@page规则。

@page在CSS分页媒体（Paged Media）规范里定义了页面盒模型，包括页面大小、边距、页码等。简单理解，它就是告诉浏览器“我这一张纸是多大、内容区域离纸边多远”。如果这个信息丢失，浏览器就会按默认的A4或者Letter大小来排版。

1.2 @page规则的“兼容性真相”

关于@page size，我必须先说一个扎心的结论：它并没有在所有主流浏览器里被完整支持。

Chromium内核的Chrome和Edge，从85版本开始支持@page size，但限制也很多，它只能作用于页面根级别，不能按某个元素单独设置页面大小。Firefox目前主流版本对@page margin是支持的，但size属性支持得不好，你很难通过CSS直接指定一张60×40mm的自定义纸张。Safari则更保守，对@page size的支持一直比较弱，而且不同版本的差异很大。

我把实际测试的情况整理成了表格：

这意味着，如果你们的系统是面向内部员工的，浏览器环境统一为Chrome或Electron，那直接用@page size没有问题。但如果是面向外部用户，用户可能用Firefox、Safari，甚至老旧浏览器，那必须额外准备一套自适应打印方案。

当时我的第一版代码长这样：

css复制@page {
  size: 60mm 40mm;
  margin: 0;
}

在Chrome里预览，纸张大小确实变成了60×40mm，但用户反馈在Firefox里打印出来还是A4。后来我特意用Firefox打开同一个页面，发现预览确实没有识别这个尺寸。

2. 排查实录：@page size不生效的四种典型原因

如果你在Chrome里也遇到了@page size不生效的情况，那问题大概率不在CSS本身，而是下面这四个地方中的一个。

2.1 第一个坑：容器尺寸干扰了分页感知

很多人写页面时，页面里的主体容器是定宽的，比如max-width: 1200px或者width: 100%。这样的布局在屏幕上看着没问题，但打印时浏览器会把整个页面当成一个分页上下文。

当页面宽度超过纸张时，浏览器为了把内容塞进纸张，会做等比缩放。这一缩放，就会让标签内容变得很小。反过来，如果页面宽度小于纸张，内容又会偏在左上角。

我的第一个坑就在这里。当时页面里有一个宽为960px的表格容器，打印时Chrome自动把整个960px宽度缩放到了60mm宽度内，标签内容自然就缩成一小块了。

解决办法是，在打印媒体下重置页面主容器的宽高：

css复制@media print {
  html,
  body {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .page-container {
    width: auto;
    max-width: none;
    margin: 0;
  }
}

这一步做完后，Chrome打印预览里纸张上的内容占比明显正常了。但是，纸张仍然可能不是60×40mm。

2.2 第二个坑：浏览器默认边距和缩放设置

浏览器打印弹窗里有几个设置：边距（Margins）、缩放（Scale）、纸张（Paper size）。很多用户从来没动过这些选项，默认值可能是“默认边距”或“适合页面”。

如果你在CSS里写了@page { margin: 0; }，但打印弹窗里的边距仍然选择的是“默认边距”，浏览器会在CSS边距之外再套一层默认边距。两个边距叠加后，标签内容就被挤出了纸张边界，打印结果偏移甚至截断。

更麻烦的是，前端JavaScript无法直接修改浏览器打印弹窗里的这些设置。所以在打印前，必须引导用户手动选择“边距：无”和“缩放：100”。如果目标用户不是技术出身，这一步能劝退很多人。

我当时把提示做成了打印前的弹窗说明，并在页面上用醒目的文字标注了打印设置步骤。虽然笨，但有效。

2.3 第三个坑：CSS书写顺序和单位使用错误

@page规则虽然简单，但也有一些细节容易踩碎。比如size属性只能写在@page规则内部，不能写在某个元素里；不能放在@import引入的样式表之外；也不能被@media print里其他代码覆盖。

还有单位问题。@page size只支持物理单位，比如mm、cm、in、pt、px，但实际用下来最稳定的是mm和in。我之前看到有人写size: 60 40;，这种没有单位的写法是完全无效的。

一个比较容易忽略的细节是，size后面两个值的顺序是“宽 高”，不是“高 宽”。我在同事的代码里看到过size: 40mm 60mm;，结果横竖方向反转，也一度让人误以为是浏览器不生效。

正确写法：

css复制@page {
  size: 60mm 40mm;
  margin: 0;
}

2.4 第四个坑：打印机驱动和纸张设置不匹配

如果你CSS写对了，打印预览也显示成了60×40mm，但打印出来标签内容仍然错位，那可能是打印机驱动层的纸张设置不匹配。

很多标签打印机驱动里维护了一套“纸张尺寸”列表，如果列表里没有60×40mm这个自定义尺寸，浏览器会优先使用驱动里默认的A4纸张。即使@page size给浏览器传递了请求，最终输出还是要看驱动是否支持。

这个坑需要在安装驱动时就解决。以常见的标签打印机为例，通常需要在驱动管理里新建一个自定义纸张，名称可以叫“60x40”，宽度60mm，高度40mm，然后设为默认纸张。之后浏览器打印时，纸张大小才能对上。

这个操作不属于前端职责，但前端同学在联调时很容易忽略，导致一度以为是自己的代码有问题。我建议在有实体打印机的情况下，先打印一张测试页确认驱动纸张设置，再进行前端调试。

3. 兜底方案：用JS把标签“量”出来再交给打印

单纯靠@page在跨浏览器场景下不可靠，那我最终是怎么解决的呢？答案是：用JavaScript直接控制标签尺寸和打印布局，把打印的“信任”从CSS分页模型转移到JS布局计算上。

3.1 为什么不能只靠CSS

CSS分页媒体模型的核心是“流式分页”，它更擅长处理连续文档，而对“每个标签必须恰好占一页”这种强约束排版，处理能力很弱。比如标签内容超过一页高度、多个标签之间出现空隙、标签交错排列等问题，在纯CSS方案里很玄学，需要在很多浏览器里单独调。

相比之下，JS方案更可控。我的思路是：不用@page size来确定标签尺寸，而是把每个标签直接渲染成一个固定宽高的div，并把div的宽高按毫米换算成像素值。浏览器在打印时只要纸张尺寸设置正确，这些div就能按预期大小落在纸张上。

3.2 具体实现：动态创建打印容器并计算尺寸

首先需要一个毫米转像素的函数。这里说的像素是浏览器CSS像素，浏览器默认以96dpi作为换算基准，即1英寸=25.4mm=96px。

javascript复制// 毫米转CSS像素，保留整数，避免小数像素在不同内核下的偏差
function mmToPx(mm) {
  return Math.round((mm / 25.4) * 96);
}

// 像素转毫米，调试用
function pxToMm(px) {
  return Math.round((px / 96) * 25.4 * 10) / 10;
}

然后动态创建标签页。每个标签是一个独立的div，强制page-break-after: always，这样在打印时每个标签独立占一页。

javascript复制function createLabelPage(data, widthMm, heightMm) {
  const page = document.createElement('div');
  page.className = 'label-page';
  page.style.width = mmToPx(widthMm) + 'px';
  page.style.height = mmToPx(heightMm) + 'px';
  page.style.overflow = 'hidden';
  page.style.pageBreakAfter = 'always';
  page.style.boxSizing = 'border-box';
  page.style.position = 'relative';

  // 内容区域
  const qr = document.createElement('div');
  qr.className = 'label-qr';
  qr.textContent = data.code;

  const name = document.createElement('div');
  name.className = 'label-name';
  name.textContent = data.name;

  page.appendChild(qr);
  page.appendChild(name);
  return page;
}

在打印容器的innerHTML里依次加入这些标签页。

这里有一个误区要提醒：不要把标签容器整体放进一个固定宽度的父容器里，然后靠父容器去排两列。打印分页和屏幕上的flex、grid排版不是一回事，父容器的宽度会再次干扰分页。最好还是每个标签一个独立页面。

3.3 打印前用matchMedia监听尺寸变化

如果用户切换纸张，比如从60×40mm切到50×30mm，前端页面最好能感知到。虽然JS无法直接读取打印机当前纸张，但可以在打印事件前后重新构建打印内容。

javascript复制window.addEventListener('beforeprint', () => {
  rebuildLabelPages();
});

window.addEventListener('afterprint', () => {
  cleanupLabelPages();
});

也可以使用matchMedia('print')监听：

javascript复制const mql = window.matchMedia('print');
mql.addListener((mqlEvent) => {
  if (mqlEvent.matches) {
    rebuildLabelPages();
  }
});

beforeprint在大多数浏览器里支持得更稳定，我建议优先使用它。

4. 自适应打印方案的完整实现

4.1 方案对比：CSS @page vs JS动态布局 vs 中间层渲染

做标签打印不止一条路，我结合项目实践把主流方案对比整理如下：

我的建议是，优先使用“JS动态布局 + 兜底CSS @page”的混合方案。CSS负责基础边距，JS负责真正决定每个标签的大小位置。

4.2 关键代码：尺寸归一化函数

在实际项目中，标签规格可能是多种多样的：60×40mm，50×30mm，还有可能是英寸为单位。为了不把单位转换散落在各处，我写了一个尺寸归一化函数。

javascript复制function parseSizeToMM(str) {
  const match = String(str).trim().match(/^([\d.]+)\s*(mm|cm|in|pt)$/i);
  if (!match) {
    return null;
  }

  const value = parseFloat(match[1]);
  const unit = match[2].toLowerCase();

  switch (unit) {
    case 'mm':
      return value;
    case 'cm':
      return value * 10;
    case 'in':
      return value * 25.4;
    case 'pt':
      return (value * 25.4) / 72;
    default:
      return null;
  }
}

function getLabelSizePx(labelSize) {
  const widthMm = parseSizeToMM(labelSize.width);
  const heightMm = parseSizeToMM(labelSize.height);
  if (!widthMm || !heightMm) {
    throw new Error('Invalid label size');
  }

  return {
    width: Math.round((widthMm / 25.4) * 96),
    height: Math.round((heightMm / 25.4) * 96),
  };
}

这里要注意的是，浏览器内部CSS像素按96dpi计算，1mm=3.779527559px，直接乘会有很多小数位。虽然CSS理论上支持小数像素，但不同浏览器对小数像素的处理方式不同，在打印场景下更容易出现误差累积。所以我用Math.round取整，保证标签尺寸是一个稳定的整数。

如果对精度要求特别高，也可以不取整，而是在打印容器上设置一个zoom或transform: scale()，配合CSS变量来统一缩放，但这个方案更复杂，一般标签打印用不上。

4.3 一个可以直接改改就用的完整示例

下面这个示例，演示了如何用JS生成多个60×40mm标签页并触发打印。

html复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>标签打印示例</title>
  <style>
    @page {
      size: 60mm 40mm;
      margin: 0;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    .label-page {
      width: 226px;   /* 由JS生成时自动设置 */
      height: 151px;  /* 由JS生成时自动设置 */
      page-break-after: always;
      position: relative;
      padding: 12px;
      border: 1px dashed #ccc;
    }

    .label-page:last-child {
      page-break-after: auto;
    }

    .label-qr {
      width: 80px;
      height: 80px;
      background-color: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .label-name {
      position: absolute;
      left: 12px;
      bottom: 12px;
      font-size: 14px;
      font-weight: bold;
    }

    .label-spec {
      position: absolute;
      left: 12px;
      top: 12px;
      font-size: 12px;
      color: #555;
    }

    .no-print {
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="no-print">
    <button onclick="printLabels()">打印标签</button>
  </div>

  <div id="print-area"></div>

  <script>
    function mmToPx(mm) {
      return Math.round((mm / 25.4) * 96);
    }

    function generateLabelHtml(data, widthMm, heightMm) {
      const width = mmToPx(widthMm);
      const height = mmToPx(heightMm);

      return `
        <div class="label-page" style="width:${width}px;height:${height}px;">
          <div class="label-spec">${data.spec}</div>
          <div class="label-qr">${data.code}</div>
          <div class="label-name">${data.name}</div>
        </div>
      `;
    }

    function printLabels() {
      const list = [
        { code: 'QR-001', name: '产品A', spec: '60×40mm' },
        { code: 'QR-002', name: '产品B', spec: '60×40mm' },
        { code: 'QR-003', name: '产品C', spec: '60×40mm' },
      ];

      const printArea = document.getElementById('print-area');
      printArea.innerHTML = list
        .map((item) => generateLabelHtml(item, 60, 40))
        .join('');

      window.print();
    }
  </script>
</body>
</html>

这个示例里，@page size仍然保留着，但标签的尺寸已经由JS生成的div宽高控制了。Chrome里会同时生效，Firefox里即使忽略@page size，只要打印弹窗里把纸张选成60×40mm，这些div仍然能按正确大小输出。

4.4 多浏览器兼容处理

对于Firefox和Safari，只靠JS设置div宽高还不够，因为浏览器打印弹窗里的“纸张大小”必须手动选择。用户一旦不选，还是默认A4。

我的经验是分三步处理：

1. 在页面加载时用JS检测浏览器内核，如果是Firefox或Safari，在打印引导层里显示“请选择纸张为60×40mm”的提示。
2. 如果不想依赖用户手动操作，可以在集成层做文章。比如内部系统使用Electron或CefSharp等基于Chromium的容器，把浏览器环境锁死。
3. 对于纯外部SaaS系统，我会优先推荐用iframe方案，把打印页嵌入到一个隐藏的iframe里面，iframe内部保留一套裸样式，不继承主页面任何全局CSS，这样能在最大程度上避免不同浏览器对页面样式干扰。

iframe打印的核心代码：

javascript复制function printInIframe(html) {
  const iframe = document.createElement('iframe');
  iframe.style.position = 'fixed';
  iframe.style.right = '0';
  iframe.style.bottom = '0';
  iframe.style.width = '0';
  iframe.style.height = '0';
  iframe.style.border = '0';
  iframe.setAttribute('aria-hidden', 'true');
  document.body.appendChild(iframe);

  const doc = iframe.contentWindow.document;
  doc.open();
  doc.write(html);
  doc.close();

  iframe.onload = () => {
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    // 打印完成后延迟移除iframe
    setTimeout(() => {
      document.body.removeChild(iframe);
    }, 500);
  };
}

使用iframe的好处是，主页面上的表格、弹窗、布局计算全部不会影响到打印内容。而且iframe里的代码可以完全复用同一套标签模板。

5. 那些容易被忽略的坑和实战技巧

5.1 打印预览和实际输出的差异

浏览器打印预览里显示的内容，跟实际打印机输出的内容经常有偏差。偏差可能来自打印机驱动里的“适合页面”、双面打印设置，也可能来自打印机本身的进纸偏移。

我调试时有个习惯：先在系统里安装一个虚拟PDF打印机，把打印结果保存成PDF文件，然后再用PDF阅读器检查页面尺寸和内容位置。PDF是由浏览器驱动的矢量数据直接生成的，能把浏览器层面的排版问题暴露出来，同时又不受实体打印机机械误差的影响。

在确认PDF结果无误后，再用实体标签打印机测试。如果实体打出来位置偏移，通常是打印机进纸偏移或驱动里的纸张设置偏移，可以在驱动里调整“打印位置偏移”参数，也可以在CSS里给每个标签元素设置一个固定的margin补偿。

5.2 用iframe隔离打印样式，别让全局CSS“教坏”了打印

我见过很多团队在同一个页面里同时做屏幕展示和打印，所有打印样式都写在@media print里，然后不断给老页面打补丁。这种方案在小项目里可以，但当页面结构复杂、有弹窗、有第三方组件时，第三方组件的样式非常容易串进打印结果。

后面我养成了习惯：只要涉及标签打印，就单独维护一个打印模板页面，配合iframe使用。主页面只负责收集数据、生成模板字符串、调用printInIframe。这样项目的打印样式独立，维护成本反而更低。

5.3 标签间距和裁剪标线处理

不干胶标签纸通常是一排排排列的，标签纸本身有间隙，有时还会在标签之间加一条竖直的切割线。如果前端只是按照单个标签尺寸生成了多个div，打印时相邻标签之间没有间距，会导致内容贴边，产生偏移。

我的做法是，在生成每个标签div时，除了设置标签本身的宽高，还会为它留出1~2mm的边距，这个边距对应标签纸的实际间隙。比如60mm宽的标签纸，如果中间间隙是1mm，那每个标签内容宽度可以设为59mm，并让内容在标签内居中。

同时，如果标签纸需要精确裁剪，可以在标签边缘画一条极浅的虚线作为参考线：

css复制.label-page {
  background-image: linear-gradient(to right, #ddd 1px, transparent 1px);
  background-size: 100% 100%;
}

但这只是辅助，最终以打印机实际输出的定位为准。

还有一个小细节：尽量别用flex或grid做打印布局。我遇到过flex布局在打印预览里正常，但实际输出时整体往右偏了1px的情况，原因是某些浏览器在打印时对子元素的小数像素舍入方式不一样。标签打印里的每个元素都尽量使用position: absolute或普通文档流，宽高用固定像素值，不要依赖自动布局算法。

有一次我排了三天标签，最后发现打印机驱动里的“打印缩放”被前一个用户改成了“适合页面”。无论代码怎么调，都会被这一项缩放带偏。所以在你确认代码没问题之前，先检查一遍驱动设置和打印弹窗里的缩放值，这个顺序反了会浪费大量时间。