DocumentSheet

document-sheet

单据纸张 · A4 居中纸面(白底/暗色近黑纸·shadow·210mm 宽) + 打印态隔离(工具栏/阴影/外边距 print:hidden·data-document-sheet 钩子) + 内置打印按钮(onPrint ?? window.print) + 子件 Header(左右抬头)/Section(带小标题段)/Footer(签章位) · 报价单/发票等单据容器

用法

基础单据

一张居中的 A4 纸，顶部自带打印按钮（打印时整条工具栏隐藏）。

瑚琏设计工作室

报价单

致

某某科技有限公司

tsx

<DocumentSheet size="a4">
  <DocumentSheetHeader>
    <div className="text-lg font-bold">瑚琏设计工作室</div>
    <div className="text-xl font-bold">报 价 单</div>
  </DocumentSheetHeader>
  <DocumentSheetSection title="致">
    <div className="font-medium">某某科技有限公司</div>
  </DocumentSheetSection>
</DocumentSheet>

段落与页脚签章

DocumentSheetSection 分段、DocumentSheetFooter 含分隔线，DocumentSheetSignature 给出对齐稳定的签名位。

服务说明

包含官网设计、组件库定制与前端实现。

tsx

<DocumentSheet size="a4" printable={false}>
  <DocumentSheetSection title="服务说明">
    包含官网设计、组件库定制与前端实现。
  </DocumentSheetSection>
  <DocumentSheetFooter>
    <div className="flex items-end justify-between gap-8">
      <p className="text-xs">备注：报价有效期 30 天。</p>
      <DocumentSheetSignature label="授权代表（签章）" />
    </div>
  </DocumentSheetFooter>
</DocumentSheet>

自定义打印回调

传 onPrint 接管打印动作（如先校验再 window.print），缺省时内置按钮直接调用 window.print()。

发票抬头

某某科技有限公司

tsx

<DocumentSheet
  size="a4"
  onPrint={() => {
    // 自定义逻辑后再打印
    window.print();
  }}
>
  <DocumentSheetSection title="发票抬头">
    某某科技有限公司
  </DocumentSheetSection>
</DocumentSheet>

何时用

需要一张「可打印的正式单据纸面」时用——报价单、发票、合同、对账单。屏幕上居中显示 A4 纸张，打印时自动隐藏工具栏/阴影/外边距。只展示结构化表格数据用 [Table]/[ProTable]；DocumentSheet 是纸张容器，配合内置子件组装抬头/明细段/签章。

导入

import { DocumentSheet, DocumentSheetHeader, DocumentSheetSection, DocumentSheetFooter, DocumentSheetSignature } from "@hulianui/ui"

Props

DocumentSheet（继承 HTMLAttributes<HTMLDivElement>）：

名称	类型	默认	说明
size	`"a4" \| "auto"`	`"a4"`	a4 固定 210mm 宽纸面 / auto 自适应容器宽
printable	`boolean`	`true`	是否渲染内置打印按钮
className	`string`	—	纸面类名

Events

事件	类型	说明
onPrint	`() => void`	打印按钮回调，缺省走 `window.print()`

Slots

插槽	类型	说明
toolbar	`ReactNode`	纸面上方工具栏内容（挂 `print:hidden`，打印时消失）
children*	`ReactNode`	纸面内容（通常由下列子件组装）

DocumentSheetSection：title?: ReactNode（段小标题）+ children。
DocumentSheetSignature：label?: ReactNode（签章说明）+ lineWidth?: number \| string（签名线宽，默认 "11rem"）。
DocumentSheetHeader / DocumentSheetFooter：仅排版容器，透传 div 属性。

禁忌 / 坑

打印态靠 print:hidden + data-document-sheet 钩子隔离工具栏/阴影/外边距；自己往纸面里加的悬浮控件若不希望被打印，也要自行挂 print:hidden。
暗色主题下纸面是「近黑纸」而非白纸——若放固定深色文字会看不清，正文颜色用 token（text-foreground/text-muted）跟随主题。

Playground

size

瑚琏设计工作室

上海市某区某路 88 号
contact@hulian.design · 021-8888-8888

报价单

单号：QT-2026-0604
日期：2026-06-04

致

某某科技有限公司

张经理 · 采购部

服务明细

项目	数量	单价	小计
品牌官网首页设计	1	¥12,000	¥12,000
组件库定制（20 件）	20	¥800	¥16,000
前端切图实现	1	¥8,000	¥8,000
合计（含税）			¥36,000

<DocumentSheet size="a4" onPrint={() => window.print()}>
  <DocumentSheetHeader>
    <div>瑚琏设计工作室</div>
    <div>报价单 · QT-2026-0604</div>
  </DocumentSheetHeader>
  <DocumentSheetSection title="服务明细">
    <table>{/* 明细行 */}</table>
  </DocumentSheetSection>
  <DocumentSheetFooter>合计 · 签章位</DocumentSheetFooter>
</DocumentSheet>

用法

基础单据

一张居中的 A4 纸，顶部自带打印按钮（打印时整条工具栏隐藏）。

瑚琏设计工作室

报价单

致

某某科技有限公司

tsx

<DocumentSheet size="a4">
  <DocumentSheetHeader>
    <div className="text-lg font-bold">瑚琏设计工作室</div>
    <div className="text-xl font-bold">报 价 单</div>
  </DocumentSheetHeader>
  <DocumentSheetSection title="致">
    <div className="font-medium">某某科技有限公司</div>
  </DocumentSheetSection>
</DocumentSheet>

段落与页脚签章

DocumentSheetSection 分段、DocumentSheetFooter 含分隔线，DocumentSheetSignature 给出对齐稳定的签名位。

服务说明

包含官网设计、组件库定制与前端实现。

tsx

<DocumentSheet size="a4" printable={false}>
  <DocumentSheetSection title="服务说明">
    包含官网设计、组件库定制与前端实现。
  </DocumentSheetSection>
  <DocumentSheetFooter>
    <div className="flex items-end justify-between gap-8">
      <p className="text-xs">备注：报价有效期 30 天。</p>
      <DocumentSheetSignature label="授权代表（签章）" />
    </div>
  </DocumentSheetFooter>
</DocumentSheet>

自定义打印回调

传 onPrint 接管打印动作（如先校验再 window.print），缺省时内置按钮直接调用 window.print()。

发票抬头

某某科技有限公司

tsx

<DocumentSheet
  size="a4"
  onPrint={() => {
    // 自定义逻辑后再打印
    window.print();
  }}
>
  <DocumentSheetSection title="发票抬头">
    某某科技有限公司
  </DocumentSheetSection>
</DocumentSheet>

何时用

名称

类型

默认

说明

size

"a4" | "auto"

"a4"

a4 固定 210mm 宽纸面 / auto 自适应容器宽

printable

boolean

true

是否渲染内置打印按钮

className

string

—

纸面类名

事件

类型

说明

onPrint

() => void

打印按钮回调，缺省走 window.print()

Slots

插槽	类型	说明
toolbar	`ReactNode`	纸面上方工具栏内容（挂 `print:hidden`，打印时消失）
children*	`ReactNode`	纸面内容（通常由下列子件组装）

禁忌 / 坑

打印态靠 print:hidden + data-document-sheet 钩子隔离工具栏/阴影/外边距；自己往纸面里加的悬浮控件若不希望被打印，也要自行挂 print:hidden。

暗色主题下纸面是「近黑纸」而非白纸——若放固定深色文字会看不清，正文颜色用 token（text-foreground/text-muted）跟随主题。

Playground

size

瑚琏设计工作室

上海市某区某路 88 号
contact@hulian.design · 021-8888-8888

报价单

单号：QT-2026-0604
日期：2026-06-04

致

某某科技有限公司

张经理 · 采购部

服务明细

项目	数量	单价	小计
品牌官网首页设计	1	¥12,000	¥12,000
组件库定制（20 件）	20	¥800	¥16,000
前端切图实现	1	¥8,000	¥8,000
合计（含税）			¥36,000

<DocumentSheet size="a4" onPrint={() => window.print()}>
  <DocumentSheetHeader>
    <div>瑚琏设计工作室</div>
    <div>报价单 · QT-2026-0604</div>
  </DocumentSheetHeader>
  <DocumentSheetSection title="服务明细">
    <table>{/* 明细行 */}</table>
  </DocumentSheetSection>
  <DocumentSheetFooter>合计 · 签章位</DocumentSheetFooter>
</DocumentSheet>

DocumentSheet

用法

基础单据

致

段落与页脚签章

服务说明

自定义打印回调

发票抬头

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

Playground

致

服务明细

DocumentSheet

用法

基础单据

致

段落与页脚签章

服务说明

自定义打印回调

发票抬头

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

Playground

致

服务明细