PSI 打印模板自定义配置指南

发布时间：2025-05-23 | 分类：使用文档

打印模板概述

PSI 系统内置了灵活的打印模板引擎，支持采购单、销售单、入库单、出库单、盘点单等各类业务单据的打印格式自定义。用户可根据企业需求调整字段显示、布局样式、公司 Logo 等，无需修改代码即可生成专业格式的业务单据。

模板引擎原理

PSI 打印模板采用"HTML + CSS + 变量替换"的技术方案：

• 模板文件为标准 HTML 格式，使用 CSS 控制打印样式
• 数据通过 {{变量名}} 占位符注入
• 表格区域使用循环渲染 {{#each items}}...{{/each}}
• 支持条件显示 {{#if condition}}...{{/if}}

常用模板变量

销售单模板示例

<div class="print-page">
  <div class="header">
    <img src="{{logoUrl}}" class="logo">
    <h1>销售出库单</h1>
  </div>

  <div class="info-row">
    <span>客户：{{customerName}}</span>
    <span>单号：{{billNo}}</span>
    <span>日期：{{billDate}}</span>
  </div>

  <table class="detail-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>商品编码</th>
        <th>商品名称</th>
        <th>规格</th>
        <th>数量</th>
        <th>单价</th>
        <th>金额</th>
      </tr>
    </thead>
    <tbody>
      {{#each items}}
      <tr>
        <td>{{@index}}</td>
        <td>{{productCode}}</td>
        <td>{{productName}}</td>
        <td>{{spec}}</td>
        <td>{{quantity}}</td>
        <td>{{price}}</td>
        <td>{{amount}}</td>
      </tr>
      {{/each}}
    </tbody>
  </table>

  <div class="footer">
    <p>合计金额：{{totalAmount}}（{{totalAmountCN}}）</p>
    <p>制单人：{{creator}} | 审核人：{{auditor}}</p>
  </div>
</div>

打印样式配置

通过 CSS 媒体查询控制打印效果：

@media print {
  .print-page {
    width: 210mm;
    padding: 15mm;
    font-size: 12pt;
  }
  .no-print {
    display: none !important;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #333;
    padding: 8px;
  }
}

模板管理操作步骤

1. 进入【系统设置】→【打印模板】
2. 选择单据类型（采购单/销售单/入库单等）
3. 点击"编辑模板"进入可视化设计器
4. 拖拽字段到指定位置，调整字体和样式
5. 预览效果，确认无误后保存
6. 在单据界面点击打印，选择对应模板

常见问题

• 打印错位：检查浏览器打印设置，关闭页眉页脚，调整边距为"最小"
• 二维码不显示：确保模板中使用了正确的二维码生成语法 {{qrcode billNo}}
• 多页表格断行：为 table 添加 page-break-inside: avoid 样式