Table - Print

Through the built-in printing function, table data can be printed in a beautiful format, supporting custom titles, headers/footers, specific columns, pagination, printing multiple tables, and custom templates.

Print Table

The most basic printing method, using the component instance method print() to generate a print preview in a new window.

Index	Name	Age	Department	Salary	Status	Address

1	John	28	Engineering	15000	Active	Chaoyang, Beijing
2	Jane	32	Product	18000	Active	Pudong, Shanghai
3	Mike	25	Design	14000	Inactive	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	Active	Nanshan, Shenzhen
5	Tom W.	29	Marketing	16000	Active	Xihu, Hangzhou

Print Table

Custom Header and Footer

Custom the top and bottom content of the printed page via headerHtml and footerHtml.

Index	Name	Age	Department	Salary	Status	Address

1	John	28	Engineering	15000	Active	Chaoyang, Beijing
2	Jane	32	Product	18000	Active	Pudong, Shanghai
3	Mike	25	Design	14000	Inactive	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	Active	Nanshan, Shenzhen
5	Tom W.	29	Marketing	16000	Active	Xihu, Hangzhou

Custom Header and Footer

Advanced Print

Multiple options can be configured such as Title, No., Time, Count, and Paper orientation.

Title: No. Time Count PortraitLandscape

Index	Name	Age	Department	Salary	Status	Address

1	John	28	Engineering	15000	Active	Chaoyang, Beijing
2	Jane	32	Product	18000	Active	Pudong, Shanghai
3	Mike	25	Design	14000	Inactive	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	Active	Nanshan, Shenzhen
5	Tom W.	29	Marketing	16000	Active	Xihu, Hangzhou

Advanced Print

Specify Columns

Control the columns to be printed by checking/unchecking.

Print Columns: Name Age Department Salary Status Address

Index	Name	Age	Department	Salary	Status	Address

1	John	28	Engineering	15000	Active	Chaoyang, Beijing
2	Jane	32	Product	18000	Active	Pudong, Shanghai
3	Mike	25	Design	14000	Inactive	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	Active	Nanshan, Shenzhen
5	Tom W.	29	Marketing	16000	Active	Xihu, Hangzhou

Specify Columns

Custom Header/Title

Build complex company headers, including company name, report name, and report number via headerHtml.

Index	Name	Age	Department	Salary	Status	Address

1	John	28	Engineering	15000	Active	Chaoyang, Beijing
2	Jane	32	Product	18000	Active	Pudong, Shanghai
3	Mike	25	Design	14000	Inactive	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	Active	Nanshan, Shenzhen
5	Tom W.	29	Marketing	16000	Active	Xihu, Hangzhou

Custom Header/Title

Custom Footer/Page Number

Add signature lines such as created by, approved by, and date via footerHtml.

Index	Name	Age	Department	Salary	Status	Address

1	John	28	Engineering	15000	Active	Chaoyang, Beijing
2	Jane	32	Product	18000	Active	Pudong, Shanghai
3	Mike	25	Design	14000	Inactive	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	Active	Nanshan, Shenzhen
5	Tom W.	29	Marketing	16000	Active	Xihu, Hangzhou

Custom Footer

Set Margins

Configure the top, right, bottom, and left margins of the printed page via margin.

Top: Right: Bottom: Left:

Index	Name	Age	Department	Salary	Status	Address

1	John	28	Engineering	15000	Active	Chaoyang, Beijing
2	Jane	32	Product	18000	Active	Pudong, Shanghai
3	Mike	25	Design	14000	Inactive	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	Active	Nanshan, Shenzhen
5	Tom W.	29	Marketing	16000	Active	Xihu, Hangzhou

Set Margins

Paginate the Table for Printing

Set the maximum number of rows per page via pageSize for automatic pagination. Use showPageNumber to display page numbers.

Index	Name	Age	Department	Salary	Status	Address

1	Employee 1	22	Engineering	12000	Inactive	Beijing City
2	Employee 2	23	Product	12500	Active	Shanghai City
3	Employee 3	24	Design	13000	Active	Guangzhou City
4	Employee 4	25	Operations	13500	Active	Shenzhen City
5	Employee 5	26	Marketing	14000	Inactive	Hangzhou City
6	Employee 6	27	Engineering	14500	Active	Beijing City
7	Employee 7	28	Product	15000	Active	Shanghai City
8	Employee 8	29	Design	15500	Active	Guangzhou City
9	Employee 9	30	Operations	16000	Inactive	Shenzhen City
10	Employee 10	31	Marketing	16500	Active	Hangzhou City
11	Employee 11	32	Engineering	17000	Active	Beijing City
12	Employee 12	33	Product	17500	Active	Shanghai City
13	Employee 13	34	Design	18000	Inactive	Guangzhou City
14	Employee 14	35	Operations	18500	Active	Shenzhen City
15	Employee 15	36	Marketing	19000	Active	Hangzhou City
16	Employee 16	22	Engineering	19500	Active	Beijing City
17	Employee 17	23	Product	20000	Inactive	Shanghai City
18	Employee 18	24	Design	20500	Active	Guangzhou City
19	Employee 19	25	Operations	21000	Active	Shenzhen City
20	Employee 20	26	Marketing	21500	Active	Hangzhou City

Pagination Print

Print Multiple Tables

Print multiple tables with different data at once using the printMultiple method, with each table automatically paginated.

Index	Name	Age	Department	Salary	Status	Address

1	John	28	Engineering	15000	Active	Chaoyang, Beijing
2	Jane	32	Product	18000	Active	Pudong, Shanghai
3	Mike	25	Design	14000	Inactive	Tianhe, Guangzhou
4	Sarah	35	Operations	22000	Active	Nanshan, Shenzhen
5	Tom W.	29	Marketing	16000	Active	Xihu, Hangzhou

Print Multiple Tables

Print Shipping Order

The printTemplate method allows for the printing of completely custom HTML templates, such as shipping orders, invoices, reports, etc.

Use the printTemplate method to print completely custom HTML templates, such as shipping orders, invoices, etc.

No Data

Print Shipping Order

API

print(config?) Method

Property	Description	Type	Default
title	Print title	string	—
showIndex	Whether to show the index (No.) column	boolean	false
indexTitle	Index column title	string	'No.'
columns	Specify columns to print (prop array)	string[]	All visible columns
excludeColumns	Exclude columns	string[]	—
data	Custom print data	Record<string, unknown>[]	Current data
formatCell	Format cell content	(value, column, row) => string	—
headerHtml	Custom header HTML	string	—
footerHtml	Custom footer HTML	string	—
margin	Page margins	{ top?, right?, bottom?, left? }	10mm
orientation	Page orientation	'portrait' | 'landscape'	'portrait'
showTime	Whether to show print time	boolean	true
showCount	Whether to show record count	boolean	true
columnTitles	Custom Column Titles	Record<string, string>	—
pageSize	Maximum rows per page	number	—
showPageNumber	Whether to show page numbers	boolean	false
tableStyle	Custom table style	string	—
extraCss	Extra CSS	string	—
autoPrint	Automatically pop up print dialog	boolean	false
beforePrint	Callback before print	() => boolean	—
afterPrint	Callback after print	() => void	—

printMultiple(tables, config?) Method

Print multiple tables at once; each table is automatically paginated.

Parameter	Description	Type
tables	Table configuration array	Array<{ title?, data, columns?, config? }>
config	Global configuration	Same as print(config)

printTemplate(html, config?) Method

Print a completely custom HTML template.

Parameter	Description	Type
html	Custom HTML content	string
config	Print configuration	Same as print(config)

Notes

• Printing depends on window.open(); ensure the browser allows popups.
• Print styles are implemented via inline CSS to ensure correct rendering in the print preview.
• Use the @page CSS rule to control page orientation and margins.
• Pagination is implemented using page-break-after: always.
• autoPrint: true automatically pops up the print dialog after the window opens.