How to print table in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Printing data tables from Angular applications requires hiding navigation elements and applying print-friendly styles.
As the creator of CoreUI with over 10 years of Angular experience since 2014, I’ve implemented print functionality for reports, invoices, and data exports in enterprise dashboards.
The standard approach triggers window.print() while CSS @media print rules hide non-printable elements and format the table for paper.
This works without any libraries and produces clean printed output.
Trigger print with a button and apply print styles.
import { Component } from '@angular/core'
import { CommonModule } from '@angular/common'
@Component({
selector: 'app-printable-table',
standalone: true,
imports: [CommonModule],
template: `
<div class="no-print">
<h1>User Report</h1>
<button (click)="print()">Print Table</button>
</div>
<div class="print-area">
<h2>Users as of {{ today | date }}</h2>
<table>
<thead>
<tr><th>Name</th><th>Email</th><th>Role</th></tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.role }}</td>
</tr>
</tbody>
</table>
<p class="print-footer">Total: {{ users.length }} users</p>
</div>
`,
styles: [`
@media print {
.no-print { display: none !important; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 8px; text-align: left; }
th { background: #eee !important; -webkit-print-color-adjust: exact; }
.print-footer { margin-top: 1rem; font-size: 0.875rem; color: #666; }
}
`]
})
export class PrintableTableComponent {
today = new Date()
users = [
{ name: 'Alice Smith', email: '[email protected]', role: 'Admin' },
{ name: 'Bob Johnson', email: '[email protected]', role: 'User' }
]
print() {
window.print()
}
}
window.print() opens the browser’s print dialog. @media print rules apply only when printing. .no-print hides buttons and navigation. -webkit-print-color-adjust: exact preserves background colors in print.
Printing a Specific Section
Print only part of the page.
import { Component } from '@angular/core'
import { CommonModule } from '@angular/common'
@Component({
selector: 'app-section-print',
standalone: true,
imports: [CommonModule],
template: `
<nav class="navbar">Navigation (hidden on print)</nav>
<aside class="sidebar">Sidebar (hidden on print)</aside>
<main>
<h2>Report</h2>
<button (click)="printSection()">Print Report</button>
<div id="printable-section">
<h3>Monthly Summary</h3>
<table>
<thead><tr><th>Item</th><th>Value</th></tr></thead>
<tbody>
<tr *ngFor="let row of data">
<td>{{ row.item }}</td>
<td>{{ row.value }}</td>
</tr>
</tbody>
</table>
</div>
</main>
`
})
export class SectionPrintComponent {
data = [
{ item: 'Total users', value: 1523 },
{ item: 'Active sessions', value: 48 },
{ item: 'New signups', value: 127 }
]
printSection() {
const section = document.getElementById('printable-section')!
const originalBody = document.body.innerHTML
document.body.innerHTML = section.innerHTML
window.print()
document.body.innerHTML = originalBody
window.location.reload()
}
}
Replacing document.body.innerHTML with only the print section isolates it. After printing, the original content is restored. window.location.reload() reinitializes Angular’s event bindings after the DOM replacement.
Adding Page Breaks
Control page breaks for multi-page documents.
@Component({
styles: [`
@media print {
.page-break { page-break-after: always; }
.no-break { page-break-inside: avoid; }
table { page-break-inside: auto; }
tr { page-break-inside: avoid; page-break-after: auto; }
}
`]
})
page-break-after: always forces a new page. page-break-inside: avoid keeps elements together. Apply these classes to group data by pages. Test with different content lengths to verify breaks are correct.
Applying Print Styles Globally
Add print styles to global stylesheet for all tables.
/* styles.css */
@media print {
body { font-size: 12pt; color: #000; }
.navbar, .sidebar, .breadcrumb, button { display: none !important; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 6pt; }
a { color: #000; text-decoration: none; }
}
Global print styles apply to every page without component-level duplication. Hide all chrome (navigation, sidebars, buttons) globally. Convert to pt units for precise paper sizing.
Best Practice Note
This is the same print approach we use in CoreUI Angular templates for printable reports and invoices. Always test print output across Chrome, Firefox, and Edge as print rendering differs. For complex multi-page documents with headers and footers on every page, consider using CSS @page rules or a server-side PDF generation library like Puppeteer. For invoice-style documents, a PDF download is often more reliable than browser print. Add <title> updates before printing so the filename and header shows the report name.
