打印拣货单分页异常求助：每页限10单且双列显示异常

问题现象 #

• 原本每页最多显示10个订单，现在无限制，会将40+订单挤入同一页
• 双列布局（左右列各5/6或4/5个订单均可），但翻页后仅右侧列显示订单

现有代码 #

CSS代码 #

@media print {
  @page {
    size: 215.9mm 279.4mm;
    margin:0;
    padding:0;
  } 
  
.product-container:nth-child(10n) {
   page-break-after: always;
}

}

.liquidated {
  column-count: 2;
  column-gap: 0px;
  column-rule-style: solid;
  column-rule-width: 2px;
  column-rule-color: black;
  font-size:14px;
  page-break-after: always;
}

.product-container:nth-child(6n){
    page-break-after: always;
}

.product-wrapper {
    border-bottom: 2px solid black;
    padding:5px;
    break-inside: avoid-column;

}
.order-index {
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.circle {
    height: 25px;
    width: 25px;
    border-radius: 64px;
    flex-shrink: 0;
    position: relative;
    border-style: solid;
    border-width: 1px;
    padding-top: 2px;
}

.number{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.ordername {
    font-weight: bold;
}

.checkbox {
    border: 1px solid black;
    padding:5px;
    margin:0px;
    display:inline-block;
    top: 1px;
    position:relative;
}

.container {
  max-width: 100%;
}

HTML代码 #

{% assign sort_orders = orders | sort: 'total_weight' %}
{% for order in sort_orders %}
 {% assign items_count = 0 %}
    {% for lineitem in order.line_items %}
        {% assign items_count = items_count | plus: lineitem.quantity %}   
    {% endfor %}  
    <div class="product-container">
        
    {% if items_count %}
        <div class="product-wrapper">
            
            <span class="ordername">{{ order.name }}</span>
            {% assign sorted_lineitems = order.line_items | sort : 'sku' %}
            {% for lineitem in sorted_lineitems %}
                  <div class="product">
                    {% assign variant_title = lineitem.variant_title %}
                     {% if variant_title != "Default Title" %}
                       <span class="checkbox"></span> {{ variant_title }}
                    {% endif %} 
                     ({{ lineitem.quantity }})

                    </div>
            {% endfor %}
            
            <b>{{ "Total quantity: " }}</b> {{ items_count }} pcs
            
            <b>Weight</b> {{ order.total_weight | divided_by: 1000 | times: 35.27 | round: 2 }} oz
            
            <div class="order-index">
                <div>{{ order.shipping_address.first_name }} {{ order.shipping_address.last_name }}</div>
                <div class="circle">
                     <span class="number">{{ forloop.index }}</span>
                </div>
            </div>
        </div>
    {% endif %}
    </div>
{% endfor %}

解决方案 #

核心问题分析 #

1. 分页规则冲突：同时存在10n和6n两个分页触发规则，且后者不在打印媒体查询范围内，导致分页逻辑混乱
2. 双列布局未生效：.liquidated类定义了双列属性，但HTML中没有将订单列表包裹在该容器内
3. 分页逻辑未匹配双列布局：双列模式下每页10个订单（左右各5），原规则未结合布局调整

修改后的CSS代码 #

/* 基础样式保留 */
.product-wrapper {
    border-bottom: 2px solid black;
    padding:5px;
    break-inside: avoid-column;
}
.order-index {
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.circle {
    height: 25px;
    width: 25px;
    border-radius: 64px;
    flex-shrink: 0;
    position: relative;
    border-style: solid;
    border-width: 1px;
    padding-top: 2px;
}
.number{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.ordername {
    font-weight: bold;
}
.checkbox {
    border: 1px solid black;
    padding:5px;
    margin:0px;
    display:inline-block;
    top: 1px;
    position:relative;
}
.container {
  max-width: 100%;
}

/* 打印专属样式 */
@media print {
  @page {
    size: 215.9mm 279.4mm;
    margin:0;
    padding:0;
  } 

  /* 双列布局仅在打印时生效 */
  .order-list-container {
    column-count: 2;
    column-gap: 0px;
    column-rule-style: solid;
    column-rule-width: 2px;
    column-rule-color: black;
    font-size:14px;
  }

  /* 双列模式下，每10个订单强制分页（对应每页左右各5个） */
  .product-container:nth-child(10n) {
    page-break-after: always;
  }
}

修改后的HTML代码 #

{% assign sort_orders = orders | sort: 'total_weight' %}
<!-- 添加外层容器，应用双列布局 -->
<div class="order-list-container">
{% for order in sort_orders %}
 {% assign items_count = 0 %}
    {% for lineitem in order.line_items %}
        {% assign items_count = items_count | plus: lineitem.quantity %}   
    {% endfor %}  
    <div class="product-container">
        
    {% if items_count %}
        <div class="product-wrapper">
            
            <span class="ordername">{{ order.name }}</span>
            {% assign sorted_lineitems = order.line_items | sort : 'sku' %}
            {% for lineitem in sorted_lineitems %}
                  <div class="product">
                    {% assign variant_title = lineitem.variant_title %}
                     {% if variant_title != "Default Title" %}
                       <span class="checkbox"></span> {{ variant_title }}
                    {% endif %} 
                     ({{ lineitem.quantity }})

                    </div>
            {% endfor %}
            
            <b>{{ "Total quantity: " }}</b> {{ items_count }} pcs
            
            <b>Weight</b> {{ order.total_weight | divided_by: 1000 | times: 35.27 | round: 2 }} oz
            
            <div class="order-index">
                <div>{{ order.shipping_address.first_name }} {{ order.shipping_address.last_name }}</div>
                <div class="circle">
                     <span class="number">{{ forloop.index }}</span>
                </div>
            </div>
        </div>
    {% endif %}
    </div>
{% endfor %}
</div>

关键修改说明 #

1. 将双列布局规则移至@media print内，避免影响非打印状态
2. 新增order-list-container作为订单列表外层容器，确保双列布局作用于所有订单
3. 删除冲突的6n分页规则，仅保留10n规则匹配双列每页10个订单的需求
4. 保留break-inside: avoid-column，防止单个订单被拆分到两列或两页

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