InvenTree 兼容 Brother-QL 的 140x62mm 库位标签模板

另请参阅本标签的小号版本(62x27mm)

这款 InvenTree 库位标签模板完全兼容 Brother 62mm QL 系列标签打印机。我在 Linux 上使用 BrotherQLLabelPrintService 来打印这些标签。

InvenTree 140x62mm 库位标签

stock_location_140x62.html
{% extends "label/label_base.html" %}
{% load l10n i18n barcode %}

{% block style %}
@page {
    size: 140mm 62mm;
    margin: 2mm; /* 确保上下左右各有严格的 2mm 间距 */
}

body {
    margin: 0;
    padding: 0;
}

/* 表格布局不受 WeasyPrint 多页分割 bug 影响 */
.label-table {
    display: table;
    width: 136mm;  /* 140mm - 4mm 总边距 */
    height: 58mm; /* 62mm - 4mm 总边距 */
    table-layout: fixed;
    page-break-inside: avoid;
    break-inside: avoid;
}

.label-row {
    display: table-row;
}

.qr-cell {
    display: table-cell;
    width: 58mm;
    height: 58mm;
    vertical-align: middle; /* 垂直居中 QR 码 */
}

.qr {
    width: 58mm;
    height: 58mm;
    display: block;
}

.text-cell {
    display: table-cell;
    width: 78mm;           /* 剩余标签空间 */
    height: 58mm;
    vertical-align: middle; /* 关键:完美垂直居中文本块 */
    padding-left: 5mm;     /* QR 码与文字之间的间距 */
    box-sizing: border-box;
    overflow: hidden;       /* 防止多页溢出的安全措施 */
}

.loc {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 1.05;
    margin: 0;
    padding: 0;
    
    /* 支持原生 UTF-8 软连字符换行 */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 自动调整步骤 */
/* 标准短名称(如 Bechergläser) */
.loc.large { font-size: 52pt; }

/* 中等长度名称 */
.loc.medium { font-size: 36pt; }

/* 超长文本(如 Test mit sehr langem Label) */
.loc.small { font-size: 26pt; }
{% endblock style %}

{% block content %}
<div class="label-table">
    <div class="label-row">
        
        <div class="qr-cell">
            <img class='qr' alt="{% trans 'QR code' %}" src='{% qrcode qr_data %}'>
        </div>
        
        <div class="text-cell">
            <div class="loc {% if location.name|length > 22 %}small{% elif location.name|length > 12 %}medium{% else %}large{% endif %}">
                {{ location.name }}
            </div>
        </div>
        
    </div>
</div>
{% endblock content %}

Check out similar posts by category: InvenTree