Table 表格 - 打印表格

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

打印表格

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

打印表格

自定义顶部和底部

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

自定义顶部和底部

高级打印

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

高级打印

指定列

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

指定列

自定义页眉/标题

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

自定义页眉/标题

自定义页尾/页码

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

自定义页尾

设置边距

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

设置边距

将表格切割为多页打印

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

分页打印

打印多张表格

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

打印多张表格

打印出货单

通过 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 可以打开窗口后自动弹出打印对话框