Angular前端实现无需跳转下载Print-Layout页面PDF方案问询

针对你的需求，我们可以通过复用Print-Layout组件+前端PDF生成工具来实现，无需跳转页面，同时避开后端SVG渲染的问题，具体步骤如下：

核心思路 #

把Print-Layout组件动态加载到Project页面的隐藏容器中，传递plant_id、project_id参数完成数据渲染后，利用浏览器原生打印API或html2canvas+jsPDF直接生成PDF，完全在前端处理SVG和样式。

1. 复用Print-Layout组件并传递参数 #

你可以选择两种方式加载组件：

方式一：静态隐藏加载

在Project页面的模板中直接引入Print-Layout组件，设置隐藏样式并绑定参数：

<!-- project.component.html -->
<button (click)="generateProjectPDF()">下载PDF</button>
<!-- 隐藏容器加载Print-Layout组件 -->
<app-print-layout 
  [plantId]="currentPlantId" 
  [projectId]="currentProjectId" 
  style="position: absolute; left: -9999px; top: -9999px;"
  (renderComplete)="onLayoutRendered()"
></app-print-layout>

方式二：动态创建组件（更节省资源）

通过Angular的ComponentFactoryResolver在按钮点击时才创建组件，避免页面一直加载隐藏组件：

// project.component.ts
import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { PrintLayoutComponent } from '../print-layout/print-layout.component';

constructor(
  private resolver: ComponentFactoryResolver,
  private vcr: ViewContainerRef
) {}

async generateProjectPDF() {
  // 创建Print-Layout组件工厂
  const factory = this.resolver.resolveComponentFactory(PrintLayoutComponent);
  const componentRef = this.vcr.createComponent(factory);
  
  // 传递参数
  componentRef.instance.plantId = this.currentPlantId;
  componentRef.instance.projectId = this.currentProjectId;
  
  // 监听组件渲染完成事件
  componentRef.instance.renderComplete.subscribe(async () => {
    // 生成PDF
    await this.createPDF(componentRef.location.nativeElement);
    // 销毁组件释放资源
    componentRef.destroy();
  });
}

2. 在Print-Layout组件中添加渲染完成通知 #

在Print-Layout组件中，当数据加载完成、DOM渲染完毕后，通过EventEmitter通知父组件：

// print-layout.component.ts
import { Component, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-print-layout',
  templateUrl: './print-layout.component.html',
  styleUrls: ['./print-layout.component.scss']
})
export class PrintLayoutComponent implements AfterViewInit {
  @Input() plantId: string;
  @Input() projectId: string;
  @Output() renderComplete = new EventEmitter<void>();

  ngAfterViewInit() {
    // 若数据为异步请求，在请求完成回调中调用emit
    setTimeout(() => {
      this.renderComplete.emit();
    }, 500); // 可根据实际渲染时间调整
  }
}

3. 实现PDF生成（两种方案） #

方案一：利用浏览器原生打印API（和Ctrl+P效果一致）

直接调用浏览器打印功能，样式完全复用页面的打印样式，适合需要用户自主选择打印设置的场景：

// project.component.ts
onLayoutRendered() {
  const printContent = document.querySelector('app-print-layout') as HTMLElement;
  const originalBody = document.body.innerHTML;
  
  // 替换页面内容为打印目标内容
  document.body.innerHTML = printContent.innerHTML;
  // 触发打印对话框
  window.print();
  // 恢复原页面内容
  document.body.innerHTML = originalBody;
  // 刷新页面恢复Angular组件状态（可选）
  window.location.reload();
}

优化建议：在Print-Layout组件的样式中添加@media print规则，专门控制打印时的样式，确保SVG和布局正确：

// print-layout.component.scss
@media print {
  body { margin: 0; }
  svg { width: 100%; height: auto; }
  // 隐藏不需要打印的元素
  .non-printable { display: none !important; }
}

方案二：使用html2canvas+jsPDF直接下载PDF

适合需要直接生成PDF文件下载，无需用户手动操作打印对话框的场景，同时能控制PDF的分辨率和格式：

1. 先安装依赖：

npm install html2canvas jspdf

2. 实现生成逻辑：

// project.component.ts
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

async createPDF(targetElement: HTMLElement) {
  // 捕获DOM为canvas，处理SVG兼容性
  const canvas = await html2canvas(targetElement, {
    useCORS: true,
    allowTaint: true,
    scale: 2 // 提高PDF分辨率
  });
  
  // 转换canvas为PDF
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4');
  const imgWidth = 210;
  const pageHeight = 297;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 0;

  // 添加第一页
  pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;

  // 处理长内容分页
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    pdf.addPage();
    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }

  // 下载PDF
  pdf.save(`project-${this.currentProjectId}.pdf`);
}

注意：如果SVG包含外部资源（如字体、图片），需要确保服务器配置了CORS，或者将外部资源转为内联形式，避免捕获失败。

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