BizPrintBar 打印条

区域 / 整页打印：打印时把目标节点临时挂到 body 打印门户下、隐藏其余内容，打印完原位归还——保留原样式、不破坏 Vue 渲染树；横向纸张、打印标题、附加打印样式（extra-css）可配。单据套打、发货单、审批单、报表打印。零第三方依赖（浏览器原生打印）。

单据区域打印

发货单 SO20260928001

收货人：张三 · 138****8000

地址：浙江省杭州市西湖区某某路 88 号

商品：机械键盘 87 键 × 2 · 无线鼠标 × 1

点击打印后，预览中只有发货单卡片；本说明文字不会被打印。

target 指定发货单卡片，页面其余部分不进纸张。

<script setup lang="ts">
/** 场景：单据区域打印——只打印发货单卡片，页面其余部分不进纸张 */
import { BizPrintBar } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 560px">
    <div id="print-ship-card" style="border: 1px solid var(--el-border-color); border-radius: 6px; padding: 18px; margin-bottom: 12px">
      <h3 style="margin: 0 0 8px">发货单 SO20260928001</h3>
      <p style="margin: 4px 0; font-size: 13px">收货人：张三 · 138****8000</p>
      <p style="margin: 4px 0; font-size: 13px">地址：浙江省杭州市西湖区某某路 88 号</p>
      <p style="margin: 4px 0; font-size: 13px">商品：机械键盘 87 键 × 2 · 无线鼠标 × 1</p>
    </div>
    <BizPrintBar target="#print-ship-card" title="发货单-SO20260928001" button-text="打印发货单" />
    <p style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      点击打印后，预览中只有发货单卡片；本说明文字不会被打印。
    </p>
  </div>
</template>

显示代码

宽表格横向打印

月度订单报表（节选）

订单号	客户	金额（元）	状态	渠道
1	SO202600001	杭州某某科技有限公司	2345	已发货	线上商城
2	SO202600002	杭州某某科技有限公司	4690	待付款	线下门店
3	SO202600003	杭州某某科技有限公司	7035	已发货	线上商城
4	SO202600004	杭州某某科技有限公司	9380	待付款	线下门店
5	SO202600005	杭州某某科技有限公司	11725	已发货	线上商城
6	SO202600006	杭州某某科技有限公司	14070	待付款	线下门店

landscape 横向纸张 + extra-css 打印期样式微调。

<script setup lang="ts">
/** 场景：宽表格横向打印——landscape 横向纸张 + extraCss 微调 */
import { BizPrintBar } from 'vue3-ep-biz-lib'

const rows = Array.from({ length: 6 }, (_, i) => ({
  id: i + 1,
  order: `SO2026${String(i + 1).padStart(5, '0')}`,
  customer: '杭州某某科技有限公司',
  amount: ((i + 1) * 2345) % 30000,
  status: i % 2 === 0 ? '已发货' : '待付款',
  channel: i % 2 === 0 ? '线上商城' : '线下门店',
}))
</script>

<template>
  <div style="max-width: 680px">
    <div id="print-report" style="margin-bottom: 12px">
      <h3 style="margin: 0 0 10px">月度订单报表（节选）</h3>
      <table style="width: 100%; border-collapse: collapse; font-size: 12px">
        <thead>
          <tr style="background: var(--el-fill-color-light)">
            <th v-for="h in ['订单号', '客户', '金额（元）', '状态', '渠道']" :key="h" style="border: 1px solid var(--el-border-color); padding: 6px 8px; text-align: left">{{ h }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="r in rows" :key="r.id">
            <td v-for="(v, k) in r" :key="k" style="border: 1px solid var(--el-border-color); padding: 6px 8px">{{ v }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <BizPrintBar
      target="#print-report"
      title="月度订单报表"
      landscape
      button-text="横向打印报表"
      extra-css="#print-report { font-size: 12px; }"
    />
  </div>
</template>

显示代码

操作条组合

报销审批单 BX202609280001

申请人：王五 · 部门：市场部 · 金额：￥3,286.00

审批链：部门负责人 → 财务复核 → 总经理

默认插槽与打印按钮并排（导出等业务动作）。

<script setup lang="ts">
/** 场景：操作条组合——打印 + 导出按钮并排（默认插槽扩展） */
import { ElButton, ElMessage } from 'element-plus'
import { Download } from '@element-plus/icons-vue'
import { BizPrintBar } from 'vue3-ep-biz-lib'

const doExport = (): void => {
  ElMessage.success('已导出 PDF（业务侧实现）')
}
</script>

<template>
  <div style="max-width: 560px">
    <div id="print-approval" style="border: 1px dashed var(--el-border-color); border-radius: 6px; padding: 16px; margin-bottom: 12px">
      <h3 style="margin: 0 0 8px">报销审批单 BX202609280001</h3>
      <p style="margin: 4px 0; font-size: 13px">申请人：王五 · 部门：市场部 · 金额：￥3,286.00</p>
      <p style="margin: 4px 0; font-size: 13px">审批链：部门负责人 → 财务复核 → 总经理</p>
    </div>
    <BizPrintBar target="#print-approval" button-text="打印审批单">
      <ElButton :icon="Download" @click="doExport">导出 PDF</ElButton>
    </BizPrintBar>
  </div>
</template>

显示代码

整页打印

留空 target 时执行浏览器整页打印（本页全部内容进入纸张）。

不指定 target 时整页打印（纸张方向与标题仍生效）。

<script setup lang="ts">
/** 场景：整页打印——不指定 target，纸张方向与标题仍生效 */
import { BizPrintBar } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <BizPrintBar title="组件文档打印稿" button-text="打印当前页面" />
    <p style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      留空 target 时执行浏览器整页打印（本页全部内容进入纸张）。
    </p>
  </div>
</template>

显示代码

打印区元素隐藏

报价单 QT-2026-118

SaaS 服务年费：￥10,600.00（含税 6%）

有效期至：2026-12-31

extra-css 隐藏打印区内的屏显按钮。

<script setup lang="ts">
/** 场景：打印样式微调——extraCss 隐藏打印区内的按钮类元素 */
import { BizPrintBar } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 560px">
    <div id="print-quote" style="border: 1px solid var(--el-border-color); border-radius: 6px; padding: 16px; margin-bottom: 12px">
      <h3 style="margin: 0 0 8px">报价单 QT-2026-118</h3>
      <p style="margin: 4px 0; font-size: 13px">SaaS 服务年费：￥10,600.00（含税 6%）</p>
      <p style="margin: 4px 0; font-size: 13px">有效期至：2026-12-31</p>
      <button type="button" class="no-print" style="margin-top: 8px">确认接受报价（仅屏显按钮）</button>
    </div>
    <BizPrintBar target="#print-quote" title="报价单-QT-2026-118" extra-css=".no-print { display: none !important; }" button-text="打印报价单" />
  </div>
</template>

显示代码

外部触发（expose）

出库单 CK20260928008

库房：杭州一号仓 · 波次：W28-03 · 件数：17

print() 由业务动作（提交成功后）调用。

<script setup lang="ts">
/** 场景：外部触发——expose print() 由业务动作（提交成功后）调用 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizPrintBar } from 'vue3-ep-biz-lib'
import type { BizPrintBarInstance } from 'vue3-ep-biz-lib'

const barRef = ref<BizPrintBarInstance>()

const submitAndPrint = (): void => {
  ElMessage.success('出库单已生成，即将打开打印')
  setTimeout(() => barRef.value?.print(), 600)
}
</script>

<template>
  <div style="max-width: 560px">
    <div id="print-outbound" style="border: 1px dashed var(--el-border-color); border-radius: 6px; padding: 16px; margin-bottom: 12px">
      <h3 style="margin: 0 0 8px">出库单 CK20260928008</h3>
      <p style="margin: 4px 0; font-size: 13px">库房：杭州一号仓 · 波次：W28-03 · 件数：17</p>
    </div>

    <!-- 隐藏的打印条（不渲染按钮，仅取其实例能力） -->
    <BizPrintBar ref="barRef" target="#print-outbound" title="出库单-CK20260928008" style="display: none" />

    <ElButton type="primary" @click="submitAndPrint">提交出库并打印</ElButton>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
target	string	''	打印目标 CSS 选择器；留空整页打印
title	string	''	打印文档标题（打印预览页眉）
button-text	string	'打印'	按钮文案
landscape	boolean	false	横向纸张（@page landscape）
extra-css	string	''	追加打印样式（@media print 生效）
disabled	boolean	false	禁用

其余属性透传打印按钮（el-button：type / size / icon …）。

Expose

名称	类型	说明
print	() => void	外部触发打印