Table 表格 - 打印表格

通过内置的打印功能，可以将表格数据以美观的格式打印输出，支持自定义标题、页眉页脚、指定列、分页切割、打印多张表格和自定义模板等。

打印表格

最基础的打印方式，通过组件实例方法 print() 在新窗口中生成打印预览。

1	张三	28	技术部	15000	在职	北京市朝阳区
2	李四	32	产品部	18000	在职	上海市浦东新区
3	王五	25	设计部	14000	离职	广州市天河区
4	赵六	35	运营部	22000	在职	深圳市南山区
5	钱七	29	市场部	16000	在职	杭州市西湖区

打印表格

自定义顶部和底部

通过 headerHtml 和 footerHtml 自定义打印页面的顶部和底部内容。

1	张三	28	技术部	15000	在职	北京市朝阳区
2	李四	32	产品部	18000	在职	上海市浦东新区
3	王五	25	设计部	14000	离职	广州市天河区
4	赵六	35	运营部	22000	在职	深圳市南山区
5	钱七	29	市场部	16000	在职	杭州市西湖区

自定义顶部和底部

高级打印

可配置标题、序号、时间、条数、纸张方向等多种选项。

标题：序号时间条数

1	张三	28	技术部	15000	在职	北京市朝阳区
2	李四	32	产品部	18000	在职	上海市浦东新区
3	王五	25	设计部	14000	离职	广州市天河区
4	赵六	35	运营部	22000	在职	深圳市南山区
5	钱七	29	市场部	16000	在职	杭州市西湖区

高级打印

指定列

通过勾选控制需要打印的列。

打印列：姓名年龄部门薪资状态地址

1	张三	28	技术部	15000	在职	北京市朝阳区
2	李四	32	产品部	18000	在职	上海市浦东新区
3	王五	25	设计部	14000	离职	广州市天河区
4	赵六	35	运营部	22000	在职	深圳市南山区
5	钱七	29	市场部	16000	在职	杭州市西湖区

指定列

自定义页眉/标题

通过 headerHtml 构建复杂的公司页眉，包含公司名、报表名、编号等。

1	张三	28	技术部	15000	在职	北京市朝阳区
2	李四	32	产品部	18000	在职	上海市浦东新区
3	王五	25	设计部	14000	离职	广州市天河区
4	赵六	35	运营部	22000	在职	深圳市南山区
5	钱七	29	市场部	16000	在职	杭州市西湖区

自定义页眉/标题

自定义页尾/页码

通过 footerHtml 添加制表人、审核人、日期等签名栏。

1	张三	28	技术部	15000	在职	北京市朝阳区
2	李四	32	产品部	18000	在职	上海市浦东新区
3	王五	25	设计部	14000	离职	广州市天河区
4	赵六	35	运营部	22000	在职	深圳市南山区
5	钱七	29	市场部	16000	在职	杭州市西湖区

自定义页尾

设置边距

通过 margin 配置打印页面的上、右、下、左边距。

上：右：下：左：

1	张三	28	技术部	15000	在职	北京市朝阳区
2	李四	32	产品部	18000	在职	上海市浦东新区
3	王五	25	设计部	14000	离职	广州市天河区
4	赵六	35	运营部	22000	在职	深圳市南山区
5	钱七	29	市场部	16000	在职	杭州市西湖区

设置边距

将表格切割为多页打印

通过 pageSize 设置每页最大行数，自动进行分页。配合 showPageNumber 显示页码。

1	员工1	22	技术部	12000	离职	北京市
2	员工2	23	产品部	12500	在职	上海市
3	员工3	24	设计部	13000	在职	广州市
4	员工4	25	运营部	13500	在职	深圳市
5	员工5	26	市场部	14000	离职	杭州市
6	员工6	27	技术部	14500	在职	北京市
7	员工7	28	产品部	15000	在职	上海市
8	员工8	29	设计部	15500	在职	广州市
9	员工9	30	运营部	16000	离职	深圳市
10	员工10	31	市场部	16500	在职	杭州市
11	员工11	32	技术部	17000	在职	北京市
12	员工12	33	产品部	17500	在职	上海市
13	员工13	34	设计部	18000	离职	广州市
14	员工14	35	运营部	18500	在职	深圳市
15	员工15	36	市场部	19000	在职	杭州市
16	员工16	22	技术部	19500	在职	北京市
17	员工17	23	产品部	20000	离职	上海市
18	员工18	24	设计部	20500	在职	广州市
19	员工19	25	运营部	21000	在职	深圳市
20	员工20	26	市场部	21500	在职	杭州市

分页打印

打印多张表格

通过 printMultiple 方法一次打印多张不同数据的表格，每张表自动分页。

1	张三	28	技术部	15000	在职	北京市朝阳区
2	李四	32	产品部	18000	在职	上海市浦东新区
3	王五	25	设计部	14000	离职	广州市天河区
4	赵六	35	运营部	22000	在职	深圳市南山区
5	钱七	29	市场部	16000	在职	杭州市西湖区

打印多张表格

打印出货单

通过 printTemplate 方法可以打印完全自定义的 HTML 模板，如出货单、发票、报表等。

使用 printTemplate 方法可以打印完全自定义的 HTML 模板，如出货单、发票等。

打印出货单

API

print(config?) 方法

参数	说明	类型	默认值
title	打印标题	`string`	—
showIndex	是否显示序号	`boolean`	`false`
indexTitle	序号列标题	`string`	`'序号'`
columns	指定打印列（prop 数组）	`string[]`	全部可见列
excludeColumns	排除列	`string[]`	—
data	自定义打印数据	`Record<string, unknown>[]`	当前数据
formatCell	格式化单元格	`(value, column, row) => string`	—
headerHtml	自定义页眉 HTML	`string`	—
footerHtml	自定义页脚 HTML	`string`	—
margin	页边距	`{ top?, right?, bottom?, left? }`	`10mm`
orientation	纸张方向	`'portrait' \| 'landscape'`	`'portrait'`
showTime	是否显示打印时间	`boolean`	`true`
showCount	是否显示数据条数	`boolean`	`true`
columnTitles	自定义列标题	`Record<string, string>`	—
pageSize	每页最大行数	`number`	—
showPageNumber	是否显示页码	`boolean`	`false`
tableStyle	自定义表格样式	`string`	—
extraCss	额外 CSS	`string`	—
autoPrint	自动弹出打印对话框	`boolean`	`false`
beforePrint	打印前回调	`() => boolean`	—
afterPrint	打印后回调	`() => void`	—

printMultiple(tables, config?) 方法

打印多张表格，每张表自动分页。

参数	说明	类型
tables	表格配置数组	`Array<{ title?, data, columns?, config? }>`
config	全局配置	同 `print(config)`

printTemplate(html, config?) 方法

打印完全自定义的 HTML 模板。

参数	说明	类型
html	自定义 HTML 内容	`string`
config	打印配置	同 `print(config)`

注意事项

打印功能依赖 window.open()，请确保浏览器允许弹窗
打印样式通过内联 CSS 实现，确保在打印预览中正确渲染
使用 @page CSS 规则控制纸张方向和边距
分页使用 page-break-after: always 实现
autoPrint: true 可以打开窗口后自动弹出打印对话框

Table 表格 - 打印表格 ​

打印表格 ​

自定义顶部和底部 ​

高级打印 ​

指定列 ​

自定义页眉/标题 ​

自定义页尾/页码 ​

设置边距 ​

将表格切割为多页打印 ​

打印多张表格 ​

打印出货单 ​

API ​

print(config?) 方法 ​

printMultiple(tables, config?) 方法 ​

printTemplate(html, config?) 方法 ​

注意事项 ​

Table 表格 - 打印表格

打印表格

自定义顶部和底部

高级打印

指定列

自定义页眉/标题

自定义页尾/页码

设置边距

将表格切割为多页打印

打印多张表格

打印出货单

API

print(config?) 方法

printMultiple(tables, config?) 方法

printTemplate(html, config?) 方法

注意事项