如何在Angular 17页面加载时调用window.print()

在Angular 17中直接用原生window.onload或者在ngOnInit里写onload='window.print()'行不通：前者是因为Angular组件的渲染时机晚于window.load事件，触发时组件内容还未渲染；后者属于语法错误，TS会检测到类型不匹配。以下是几种可靠的实现方式：

方法1：使用AfterViewInit生命周期钩子 #

AfterViewInit是Angular确保组件视图完全初始化后的钩子，适合执行依赖DOM渲染的操作：

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

@Component({
  selector: 'app-print-page',
  templateUrl: './print-page.component.html',
  styleUrls: ['./print-page.component.css']
})
export class PrintPageComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 加微小延迟确保异步渲染的内容也能被捕获
    setTimeout(() => {
      window.print();
    }, 100);
  }
}

如果组件包含异步加载的数据（比如HTTP请求返回的内容），可以适当延长延迟时间，或者在数据加载完成后再调用window.print()。

方法2：通过Renderer2监听window.load事件 #

用Angular官方推荐的Renderer2绑定事件，避免直接操作全局window导致的内存泄漏：

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

@Component({
  selector: 'app-print-page',
  templateUrl: './print-page.component.html',
  styleUrls: ['./print-page.component.css']
})
export class PrintPageComponent implements OnInit, OnDestroy {
  private loadEventHandler: () => void;

  constructor(private renderer: Renderer2) {}

  ngOnInit(): void {
    this.loadEventHandler = this.renderer.listen('window', 'load', () => {
      window.print();
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，防止内存泄漏
    this.loadEventHandler();
  }
}

方法3：路由场景下结合NavigationEnd事件 #

如果该组件是通过路由导航进入的，可以监听路由完成事件，确保页面完全加载后触发打印：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

@Component({
  selector: 'app-print-page',
  templateUrl: './print-page.component.html',
  styleUrls: ['./print-page.component.css']
})
export class PrintPageComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      setTimeout(() => {
        window.print();
      }, 200);
    });
  }
}

内容的提问来源于stack exchange，提问作者Elaine Byene