BizPrintPage 打印页面

打印页容器：A4 纸张预览（竖向 / 横向、内容边距 mm、屏幕缩放 50%–150%）+ 工具条（打印 / 方向 / 缩放）；window.print 时经 @media print 隐藏屏幕装饰、纸张按真实尺寸输出（缩放强制还原）。单据、报告、凭证、对账单等打印场景的页面壳——与 BizPrintBar（打印触发条）互补，本组件管整页排版。

基础用法

商品	规格	数量	金额
iPhone 15 Pro	256GB 原色钛金属	1	¥ 8,999
MagSafe 保护壳	透明款	2	¥ 399
20W USB-C 充电器	官方标配	1	¥ 149

A4 纸张 + 页眉标题 + 内容区，工具条触发浏览器打印。

<script setup lang="ts">
/** 场景：基础——A4 纸张 + 工具条打印 */
import { BizPrintPage } from 'vue3-ep-biz-lib'

const rows = [
  ['iPhone 15 Pro', '256GB 原色钛金属', '1', '¥ 8,999'],
  ['MagSafe 保护壳', '透明款', '2', '¥ 399'],
  ['20W USB-C 充电器', '官方标配', '1', '¥ 149'],
]
</script>

<template>
  <BizPrintPage title="销售出货单">
    <table style="width: 100%; border-collapse: collapse; font-size: 13px">
      <thead>
        <tr style="background: var(--el-fill-color-lighter)">
          <th style="border: 1px solid var(--el-border-color); padding: 6px 8px; text-align: left">商品</th>
          <th style="border: 1px solid var(--el-border-color); padding: 6px 8px; text-align: left">规格</th>
          <th style="border: 1px solid var(--el-border-color); padding: 6px 8px">数量</th>
          <th style="border: 1px solid var(--el-border-color); padding: 6px 8px; text-align: right">金额</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, i) in rows" :key="i">
          <td
            v-for="(cell, j) in row"
            :key="j"
            :style="{
              border: '1px solid var(--el-border-color)',
              padding: '6px 8px',
              textAlign: j === 3 ? 'right' : j === 2 ? 'center' : 'left',
            }"
          >
            {{ cell }}
          </td>
        </tr>
      </tbody>
    </table>
  </BizPrintPage>
</template>

横向纸张

月份	订单量	GMV（万元）	客单价	退款率	毛利率	活跃客户	复购率	NPS
2026-07	12,483	2,180	¥ 342	2.1%	24.6%	8,902	38%	62
2026-08	13,975	2,455	¥ 351	1.9%	25.1%	9,315	41%	65
2026-09	15,208	2,742	¥ 358	1.7%	25.9%	9,864	44%	68

v-model:direction 切横向（宽表 / 宽图表场景）。

<script setup lang="ts">
/** 场景：横向纸张——宽表打印 */
import { ref } from 'vue'
import { BizPrintPage } from 'vue3-ep-biz-lib'

const direction = ref<'portrait' | 'landscape'>('landscape')

const cols = ['月份', '订单量', 'GMV（万元）', '客单价', '退款率', '毛利率', '活跃客户', '复购率', 'NPS']
const data = [
  ['2026-07', '12,483', '2,180', '¥ 342', '2.1%', '24.6%', '8,902', '38%', '62'],
  ['2026-08', '13,975', '2,455', '¥ 351', '1.9%', '25.1%', '9,315', '41%', '65'],
  ['2026-09', '15,208', '2,742', '¥ 358', '1.7%', '25.9%', '9,864', '44%', '68'],
]
</script>

<template>
  <BizPrintPage v-model:direction="direction" title="月度经营宽表">
    <table style="width: 100%; border-collapse: collapse; font-size: 12px">
      <thead>
        <tr style="background: var(--el-fill-color-lighter)">
          <th v-for="col in cols" :key="col" style="border: 1px solid var(--el-border-color); padding: 5px 6px">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, i) in data" :key="i">
          <td v-for="(cell, j) in row" :key="j" :style="{ border: '1px solid var(--el-border-color)', padding: '5px 6px', textAlign: j === 0 ? 'left' : 'right' }">
            {{ cell }}
          </td>
        </tr>
      </tbody>
    </table>
  </BizPrintPage>
</template>

页眉页脚插槽

经双方核对，本期应结算金额为人民币 ¥ 86,430.00（大写：捌万陆仟肆佰叁拾元整），请于 2026-11-10 前完成对公转账。

header / footer 插槽自定义页眉页脚（公司名、单号、签署区）。

<script setup lang="ts">
/** 场景：header / footer 插槽——页眉页脚自定义 */
import { BizPrintPage } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizPrintPage>
    <template #header>
      <div style="display: flex; justify-content: space-between; align-items: flex-end">
        <div>
          <div style="font-size: 18px; font-weight: 600">星辰科技有限公司</div>
          <div style="font-size: 12px; color: var(--el-text-color-secondary)">对账单编号：ST-202610-0086</div>
        </div>
        <div style="font-size: 12px; text-align: right; color: var(--el-text-color-secondary)">
          结算周期：2026-10-01 ~ 2026-10-31
        </div>
      </div>
    </template>

    <p style="font-size: 13px; line-height: 24px">
      经双方核对，本期应结算金额为人民币 <b>¥ 86,430.00</b>（大写：捌万陆仟肆佰叁拾元整），
      请于 2026-11-10 前完成对公转账。
    </p>

    <template #footer>
      <div style="display: flex; justify-content: space-between">
        <span>甲方（盖章）：________________</span>
        <span>乙方（盖章）：________________</span>
        <span>打印时间：2026-10-20</span>
      </div>
    </template>
  </BizPrintPage>
</template>

无工具条

今收到 华东理工大学后勤处 交付的项目尾款，合计人民币 ¥ 120,000.00（大写：壹拾贰万元整），款项已结清。

show-toolbar=false 纯纸张（业务层自备操作入口，expose print() 触发）。

<script setup lang="ts">
/** 场景：无工具条 + expose print() */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizPrintPage } from 'vue3-ep-biz-lib'
import type { BizPrintPageInstance } from 'vue3-ep-biz-lib'

const refEl = ref<BizPrintPageInstance | null>(null)
</script>

<template>
  <div>
    <div style="margin-bottom: 10px">
      <ElButton size="small" type="primary" plain @click="refEl?.print()">业务按钮触发打印</ElButton>
    </div>
    <BizPrintPage ref="refEl" :show-toolbar="false" title="收款凭证" style="max-width: 700px">
      <p style="font-size: 13px; line-height: 24px">
        今收到 <b>华东理工大学后勤处</b> 交付的项目尾款，合计人民币 <b>¥ 120,000.00</b>（大写：壹拾贰万元整），款项已结清。
      </p>
    </BizPrintPage>
  </div>
</template>

缩放预览

小屏查看整页排版时调低缩放；点击打印时缩放强制还原为 100%，保证纸张实际输出尺寸不变。

v-model:zoom 屏幕缩放（打印不受影响，自动还原 100%）。

<script setup lang="ts">
/** 场景：屏幕缩放预览（打印自动还原 100%） */
import { ref } from 'vue'
import { BizPrintPage } from 'vue3-ep-biz-lib'

const zoom = ref(0.7)
</script>

<template>
  <BizPrintPage v-model:zoom="zoom" title="缩放预览" style="max-width: 760px">
    <p style="font-size: 13px; line-height: 24px">
      小屏查看整页排版时调低缩放；点击打印时缩放强制还原为 100%，保证纸张实际输出尺寸不变。
    </p>
  </BizPrintPage>
</template>

打印事件

工具条点击打印，观察事件日志与计数。

before-print / printed 事件（打印前塞数据、打印后计数等）。

<script setup lang="ts">
/** 场景：before-print / printed 事件 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizPrintPage } from 'vue3-ep-biz-lib'

const count = ref(0)
const logs = ref<string[]>([])

const onBefore = (): void => {
  logs.value.unshift(`before-print：第 ${count.value + 1} 次打印前处理（如补打时间戳）`)
  if (logs.value.length > 4) logs.value.pop()
}

const onPrinted = (): void => {
  count.value += 1
  logs.value.unshift(`printed：已打印 ${count.value} 次`)
  if (logs.value.length > 4) logs.value.pop()
  ElMessage.success(`打印完成（累计 ${count.value} 次）`)
}
</script>

<template>
  <div>
    <BizPrintPage title="打印事件演示" style="max-width: 720px" @before-print="onBefore" @printed="onPrinted">
      <p style="font-size: 13px">工具条点击打印，观察事件日志与计数。</p>
    </BizPrintPage>
    <p v-for="(log, i) in logs" :key="i" style="margin: 6px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      {{ log }}
    </p>
  </div>
</template>

内容边距

紧凑 8mm宽松 22mm

内容边距按毫米配置，打印输出与屏幕预览一致；不同单据模板可按信息密度选择紧凑或宽松版式。

padding 按毫米配置：紧凑 8mm 与宽松 22mm 对比。

<script setup lang="ts">
/** 场景：内容边距——padding 8mm 紧凑与 22mm 宽松对比 */
import { ref } from 'vue'
import { ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizPrintPage } from 'vue3-ep-biz-lib'

const padding = ref(8)
</script>

<template>
  <div>
    <ElRadioGroup v-model="padding" size="small" style="margin-bottom: 10px">
      <ElRadioButton :value="8">紧凑 8mm</ElRadioButton>
      <ElRadioButton :value="22">宽松 22mm</ElRadioButton>
    </ElRadioGroup>
    <BizPrintPage title="内容边距对比" :padding="padding" style="max-width: 720px">
      <p style="font-size: 13px; line-height: 22px">
        内容边距按毫米配置，打印输出与屏幕预览一致；不同单据模板可按信息密度选择紧凑或宽松版式。
      </p>
    </BizPrintPage>
  </div>
</template>

长内容排版

采购单号	物料	数量	金额	状态
PO-20261000	物料-001	1	¥ 88.00	已到货
PO-20261001	物料-002	2	¥ 208.00	在途
PO-20261002	物料-003	3	¥ 328.00	在途
PO-20261003	物料-004	4	¥ 448.00	在途
PO-20261004	物料-005	5	¥ 568.00	在途
PO-20261005	物料-006	1	¥ 688.00	在途
PO-20261006	物料-007	2	¥ 808.00	在途
PO-20261007	物料-008	3	¥ 928.00	已到货
PO-20261008	物料-009	4	¥ 1048.00	在途
PO-20261009	物料-010	5	¥ 88.00	在途
PO-20261010	物料-011	1	¥ 208.00	在途
PO-20261011	物料-012	2	¥ 328.00	在途
PO-20261012	物料-013	3	¥ 448.00	在途
PO-20261013	物料-014	4	¥ 568.00	在途
PO-20261014	物料-015	5	¥ 688.00	已到货
PO-20261015	物料-016	1	¥ 808.00	在途
PO-20261016	物料-017	2	¥ 928.00	在途
PO-20261017	物料-018	3	¥ 1048.00	在途
PO-20261018	物料-019	4	¥ 88.00	在途
PO-20261019	物料-020	5	¥ 208.00	在途
PO-20261020	物料-021	1	¥ 328.00	在途
PO-20261021	物料-022	2	¥ 448.00	已到货
PO-20261022	物料-023	3	¥ 568.00	在途
PO-20261023	物料-024	4	¥ 688.00	在途
PO-20261024	物料-025	5	¥ 808.00	在途
PO-20261025	物料-026	1	¥ 928.00	在途
PO-20261026	物料-027	2	¥ 1048.00	在途
PO-20261027	物料-028	3	¥ 88.00	在途
PO-20261028	物料-029	4	¥ 208.00	已到货
PO-20261029	物料-030	5	¥ 328.00	在途
PO-20261030	物料-031	1	¥ 448.00	在途
PO-20261031	物料-032	2	¥ 568.00	在途
PO-20261032	物料-033	3	¥ 688.00	在途
PO-20261033	物料-034	4	¥ 808.00	在途
PO-20261034	物料-035	5	¥ 928.00	在途
PO-20261035	物料-036	1	¥ 1048.00	已到货
PO-20261036	物料-037	2	¥ 88.00	在途
PO-20261037	物料-038	3	¥ 208.00	在途
PO-20261038	物料-039	4	¥ 328.00	在途
PO-20261039	物料-040	5	¥ 448.00	在途

屏幕预览为单张长纸；打印时浏览器按 A4 自动分页输出。

明细表跨 A4 长度时屏幕单纸预览，打印由浏览器自动分页。

<script setup lang="ts">
/** 场景：长内容排版——明细表跨页（浏览器打印自动分页） */
import { BizPrintPage } from 'vue3-ep-biz-lib'

const rows = Array.from({ length: 40 }, (_, i) => [
  `PO-2026${String(1000 + i)}`,
  `物料-${String(i + 1).padStart(3, '0')}`,
  `${(i % 5) + 1}`,
  `¥ ${((i % 9) * 120 + 88).toFixed(2)}`,
  i % 7 === 0 ? '已到货' : '在途',
])
</script>

<template>
  <BizPrintPage title="采购明细清单（节选）" style="max-width: 760px">
    <table style="width: 100%; border-collapse: collapse; font-size: 12px">
      <thead>
        <tr style="background: var(--el-fill-color-lighter)">
          <th style="border: 1px solid var(--el-border-color); padding: 4px 6px">采购单号</th>
          <th style="border: 1px solid var(--el-border-color); padding: 4px 6px">物料</th>
          <th style="border: 1px solid var(--el-border-color); padding: 4px 6px">数量</th>
          <th style="border: 1px solid var(--el-border-color); padding: 4px 6px">金额</th>
          <th style="border: 1px solid var(--el-border-color); padding: 4px 6px">状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, i) in rows" :key="i">
          <td v-for="(cell, j) in row" :key="j" :style="{ border: '1px solid var(--el-border-color)', padding: '4px 6px', textAlign: j === 0 ? 'left' : j >= 2 ? 'right' : 'left' }">
            {{ cell }}
          </td>
        </tr>
      </tbody>
    </table>
    <p style="font-size: 11px; color: var(--el-text-color-secondary)">
      屏幕预览为单张长纸；打印时浏览器按 A4 自动分页输出。
    </p>
  </BizPrintPage>
</template>

批量套打（一页一条）

今收到 华东智造有限公司 交来货款，金额（大写）壹万贰仟捌佰元整

品名	数量	单价（元）	小计（元）
边缘网关 GW-100	8	1,200	9,600
温湿度传感器	8	400	3,200
合计			12,800

今收到 西南商贸股份有限公司 交来货款，金额（大写）陆仟叁佰元整

品名	数量	单价（元）	小计（元）
工业路由器 R-200	3	1,500	4,500
安装支架（套）	6	300	1,800
合计			6,300

今收到 北方数据中心 交来货款，金额（大写）贰万肆仟陆佰元整

品名	数量	单价（元）	小计（元）
动环监控主机	4	3,600	14,400
烟感探测器	24	420	10,080
合计			24,600

data 数组传入后每条记录渲染一张 A4（默认插槽作用域 { item, index, total } 即套打模板，header / footer 同步带 { item, index }）；打印时每张纸独立分页（break-after: page），收据 / 发货单 / 工卡连续输出一次完成。

<script setup lang="ts">
/** 场景：批量套打——data 每条渲染一张 A4 收据，打印一页一条（#header/#default/#footer 均带 { item, index }） */
import { BizPrintPage } from 'vue3-ep-biz-lib'

interface Receipt {
  no: string
  payer: string
  amount: number
  digit: string
  items: Array<{ name: string; qty: number; price: number }>
}

const receipts: Receipt[] = [
  {
    no: 'NO.2026102301',
    payer: '华东智造有限公司',
    amount: 12800,
    digit: '壹万贰仟捌佰元整',
    items: [
      { name: '边缘网关 GW-100', qty: 8, price: 1200 },
      { name: '温湿度传感器', qty: 8, price: 400 },
    ],
  },
  {
    no: 'NO.2026102302',
    payer: '西南商贸股份有限公司',
    amount: 6300,
    digit: '陆仟叁佰元整',
    items: [
      { name: '工业路由器 R-200', qty: 3, price: 1500 },
      { name: '安装支架（套）', qty: 6, price: 300 },
    ],
  },
  {
    no: 'NO.2026102303',
    payer: '北方数据中心',
    amount: 24600,
    digit: '贰万肆仟陆佰元整',
    items: [
      { name: '动环监控主机', qty: 4, price: 3600 },
      { name: '烟感探测器', qty: 24, price: 420 },
    ],
  },
]

const today = '2026年10月23日'
</script>

<template>
  <div style="border: 1px solid var(--el-border-color-lighter); border-radius: 6px; overflow: auto; max-height: 520px">
    <BizPrintPage :zoom="0.55" :data="receipts" title="收款收据" print-text="批量打印收据">
      <template #header="{ item }">
        <div style="display: flex; justify-content: space-between; align-items: baseline">
          <h1 style="margin: 0; font-size: 22px; letter-spacing: 6px">收款收据</h1>
          <span style="font-size: 12px; color: #666">{{ item.no }}</span>
        </div>
      </template>
      <template #default="{ item }">
        <div style="font-size: 13px; line-height: 2">
          <p style="margin: 10px 0">今收到 <b>{{ item.payer }}</b> 交来货款，金额（大写）{{ item.digit }}</p>
        <table style="width: 100%; border-collapse: collapse; margin: 12px 0">
          <thead>
            <tr style="background: #f5f7fa">
              <th style="border: 1px solid #dcdfe6; padding: 6px">品名</th>
              <th style="border: 1px solid #dcdfe6; padding: 6px; width: 70px">数量</th>
              <th style="border: 1px solid #dcdfe6; padding: 6px; width: 90px">单价（元）</th>
              <th style="border: 1px solid #dcdfe6; padding: 6px; width: 100px">小计（元）</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, i) in item.items" :key="i">
              <td style="border: 1px solid #dcdfe6; padding: 6px">{{ row.name }}</td>
              <td style="border: 1px solid #dcdfe6; padding: 6px; text-align: center">{{ row.qty }}</td>
              <td style="border: 1px solid #dcdfe6; padding: 6px; text-align: right">{{ row.price.toLocaleString() }}</td>
              <td style="border: 1px solid #dcdfe6; padding: 6px; text-align: right">{{ (row.qty * row.price).toLocaleString() }}</td>
            </tr>
            <tr>
              <td colspan="3" style="border: 1px solid #dcdfe6; padding: 6px; text-align: right; font-weight: 600">合计</td>
              <td style="border: 1px solid #dcdfe6; padding: 6px; text-align: right; font-weight: 600">{{ item.amount.toLocaleString() }}</td>
            </tr>
          </tbody>
        </table>
        </div>
      </template>
      <template #footer="{ index, total }">
        <div style="display: flex; justify-content: space-between; font-size: 12px; color: #666">
          <span>开票人：李出纳　　收款人：王财务</span>
          <span>{{ today }}　（{{ index + 1 }} / {{ total }}）</span>
        </div>
      </template>
    </BizPrintPage>
  </div>
</template>

打印行为说明

点击工具条「打印」（或 expose 的 print()）时，组件会按当前方向动态注入 @page { size: A4 portrait/landscape }，横向纸张不会被裁切。
打印采用「隐藏页面其余内容、仅输出纸张链」方案：页面存在多个 BizPrintPage 时会全部输出，建议整页打印路由内使用单个组件。
批量套打（data）时每张纸 break-after: page 独立分页，最后一张不产生空白尾页。
直接按 Ctrl+P（未经组件 print()）走竖向 A4 默认 @page；需要横向请通过组件工具条触发或在业务层自行设置 @page。

Props

属性名	类型	默认值	说明
title	`string`	`''`	页眉标题（空串不渲染 header 默认内容）
show-toolbar	`boolean`	`true`	屏幕工具条（打印自动隐藏）
v-model:direction	`'portrait' \| 'landscape'`	`'portrait'`	纸张方向
padding	`number \| string`	`14`	内容边距 mm
v-model:zoom	`number`	`1`	屏幕预览缩放 0.5–1.5（打印还原）
print-text	`string`	`'打印'`	打印按钮文案
data	`T[]`	—	批量套打数据：每条渲染一张 A4，打印一页一条；不传为单页容器

Events

事件名	参数	说明
update:direction	`(direction)`	方向切换
update:zoom	`(zoom)`	缩放变化
before-print	—	window.print 前
printed	—	window.print 调用后

Slots

插槽名	作用域	说明
default	`{ item, index, total }`	纸张内容；data 模式下即每条记录的套打模板（item 为该条数据）
header	`{ item, index }`	页眉（默认渲染标题）
footer	`{ item, index }`	页脚

Expose

名称	类型	说明
print	`() => void`	编程式触发打印

BizPrintPage 打印页面 ​

基础用法 ​

横向纸张 ​

页眉页脚插槽 ​

无工具条 ​

缩放预览 ​

打印事件 ​

内容边距 ​

长内容排版 ​

批量套打（一页一条） ​

打印行为说明 ​

Props ​

Events ​

Slots ​

Expose ​