如何在Angular 2中制作可打印的页面

<!-- 可打印的页面内容 -->
<h1>可打印的页面标题</h1>
<p>这是一个可打印的页面示例。</p>

/* 打印样式 */
@media print {
  /* 隐藏不必要的元素 */
  header, footer, .no-print {
    display: none;
  }
  
  /* 调整字体大小 */
  body {
    font-size: 12px;
  }
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-printable-page',
  templateUrl: './printable-page.component.html',
  styleUrls: ['./printable-page.component.scss']
})
export class PrintablePageComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    // 监听打印前后事件
    window.addEventListener('beforeprint', this.beforePrint);
    window.addEventListener('afterprint', this.afterPrint);
  }

  beforePrint() {
    // 打印前执行的操作
    console.log('Before print');
  }

  afterPrint() {
    // 打印后执行的操作
    console.log('After print');
  }

  printPage() {
    // 触发浏览器的打印功能
    window.print();
  }

}

<!-- 调用打印功能 -->
<button (click)="printablePage.printPage()">打印页面</button>

<!-- 注入可打印页面组件 -->
<app-printable-page #printablePage></app-printable-page>