Angular/Ionic应用打印PDF仅显示当前视图，求完整页面解决方案

一、解除打印时的高度与溢出限制 #

只打印可见区域的核心原因是页面容器（比如body、html或框架自带容器）设置了固定高度（如100vh）或overflow: hidden，导致超出视口的内容被隐藏。在打印样式中重置这些属性：

@media print {
  /* 重置根容器高度与溢出规则 */
  body, html, .ion-page, .ion-content {
    height: auto !important;
    overflow: visible !important;
  }
  /* 隐藏打印不需要的元素（按需调整选择器） */
  .toolbar, .print-trigger-btn {
    display: none !important;
  }
  /* 避免内容被分页切割 */
  .content-block {
    page-break-inside: avoid;
  }
}

无论是否使用Ionic，这一步都是基础——让打印引擎识别完整页面内容，而非仅当前视口。

二、锁定打印样式实现“所见即所得” #

确保打印时的样式与屏幕完全一致：

1. 在angular.json中单独引入打印样式文件，避免屏幕样式被打印规则覆盖：

"styles": [
  "src/styles.css",
  "src/print-styles.css"
]

2. 在print-styles.css中继承屏幕样式核心属性：

/* 继承屏幕样式的基础属性 */
* {
  font-family: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}
/* 修复打印时的边框、间距问题 */
.container {
  padding: 1rem !important;
  border: none !important;
}

三、处理动态/懒加载内容 #

如果页面包含动态渲染或懒加载内容，需确保打印前所有内容已加载完成：

printFullPage() {
  // 等待动态内容渲染完成（时间按需调整）
  setTimeout(() => {
    window.print();
  }, 600);
}

若是Ionic项目，可监听ionContentDidLoad或ionScrollEnd事件，确认内容全部渲染后再触发打印。

四、进阶：导出PDF文件（jsPDF + html2canvas） #

若需要直接导出PDF文件而非调用系统打印，可使用这两个库实现精准内容捕获：

1. 安装依赖：

npm install jspdf html2canvas

2. 实现导出逻辑：

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

exportToPdf() {
  const targetElement = document.getElementById('print-target');
  if (!targetElement) return;

  // 高清晰度捕获页面内容
  html2canvas(targetElement, { scale: 2, useCORS: true }).then(canvas => {
    const pdf = new jsPDF('portrait', 'mm', 'a4');
    const imgWidth = 210; // A4宽度（mm）
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    let remainingHeight = imgHeight;
    let yPosition = 0;

    // 添加第一页
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, yPosition, imgWidth, imgHeight);
    remainingHeight -= 297; // A4高度（mm）

    // 处理分页
    while (remainingHeight > 0) {
      yPosition = remainingHeight - imgHeight;
      pdf.addPage();
      pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, yPosition, imgWidth, imgHeight);
      remainingHeight -= 297;
    }

    pdf.save('full-page.pdf');
  });
}

给需要导出的内容块添加id="print-target"，即可精准捕获目标区域，scale:2保证PDF清晰度。

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