我是新的Angular ，我试图使一个简单的形式网站。我想将表格导出为pdf，但他们通常将数据保存在数组中并从那里提取数据，但我使用json-server，所以我很难做什么。
product.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Product } from './product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http :HttpClient) { }

  getProducts():Observable<Product[]> {
    return this.http.get<Product[]>('http://localhost:3000/sector?sort=desc')
  }

  AddEditProduct(postData: any, selectedPdt:any)
  {if(!selectedPdt )
  {
    return this.http.post('http://localhost:3000/sector',postData)
  }
    else{
      return this.http.put(`http://localhost:3000/sector/${selectedPdt.id}`,postData)
    }
  }
  
  deleteProduct(productId: number){
    return this.http.delete(`http://localhost:3000/sector/${productId}`)
  }
   
}

product.component.ts

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

import { ConfirmationService } from 'primeng/api';
import { Subscription } from 'rxjs';
import { HotToastService } from '@ngneat/hot-toast';

import { Product } from './product';
import { ProductService } from './product.service';
import * as FileSaver from 'file-saver';



@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit,OnDestroy{

  
  products: Product[]= [];
  displayAddEditModal= false;  
  selectedProduct: any=null;
  subscriptions: Subscription[]=[];
  Ptdsubscriptions: Subscription= new Subscription();  
  

  constructor(private productService: ProductService,
    private confirmationService:ConfirmationService,
    private toast: HotToastService) {}

  ngOnInit(): void {
    this.getProductList();
  }
   
  

  getProductList(){
    this.Ptdsubscriptions = this.productService.getProducts().subscribe(
      response=>{
        this.products=response
      }
    );
    this.subscriptions.push(this.Ptdsubscriptions)
  }

  showAddModal(){
    this.displayAddEditModal=true;
    this.selectedProduct=null
  }
  hideAddModal( isClosed:boolean) {
    this.displayAddEditModal=!isClosed;
  }
  saveOrUpdateProductToList(newData:any) {
    if(newData.id===this.selectedProduct.id){
      const productIndex = this.products.findIndex(data => data.id === newData.id)
      this.products[productIndex]=newData;
    }
    this.products.unshift(newData)
    // this.getProductList()
  }
  showEditModal(product: Product) {
    this.displayAddEditModal=true;
    this.selectedProduct=product
  }
  deleteProduct(product: Product){
    this.confirmationService.confirm({
      message: 'Are you sure that you want to delete this sector?',
      accept: () => {
          //Actual logic to perform a confirmation
          this.productService.deleteProduct(product.id).subscribe(
            response => {
              this.products=this.products.filter(data=>data.id!==product.id)
              this.toast.success('Successfully toasted!')
            },
            error=>{
//toast  gelecek
            }
          )
      }
  });
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub=>sub.unsubscribe())
  }
  exportExcel(): void
  {
    import("xlsx").then(xlsx => {
        const worksheet = xlsx.utils.json_to_sheet(this.products);
        const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
        const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
        this.saveAsExcelFile(excelBuffer, "products");
    });
}

saveAsExcelFile(buffer: any, fileName: string): void {
    let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
    let EXCEL_EXTENSION = '.xlsx';
    const data: Blob = new Blob([buffer], {
        type: EXCEL_TYPE
    });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
}

exportPdf(){
  
}
}

当我点击按钮，我希望PDF文件被创建和下载，就像我写的Excel
product.compenent.html

<link rel="stylesheet" href="https://unpkg.com/primeflex@^3/primeflex.css">
<p-card>
  <button pButton pRipple type="button" class="p-button-outlined p-button-success mr-2" icon="pi pi-file-excel"  pTooltip="XLS" tooltipPosition="bottom" (click)="exportExcel()"></button>
  <button pButton pRipple type="button" class="p-button-outlined " icon="pi pi-file-excel" (click)="exportPdf()" pTooltip="PDF" tooltipPosition="bottom"></button>
  
    
  <div class="flex justify-content-between">
    <h2>Sector</h2>
    <button pButton pRipple type="button" label="Add Product" class="p-button-outlined  " (click)="showAddModal()"></button>
    
  </div>
  <p></p>
  <p-table [value]="products" [paginator]="true" [rows]="5">
    <ng-template pTemplate="header">
      <tr>
        <th>Code</th>
        <th>Explanation</th>
        <th>Edit</th>
        <th>Delete</th>
       
      
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
      <tr>
        <td>{{ product.code }}</td>
        <td>{{ product.explanation }}</td>
       <td>
        <button pButton pRipple type="button" icon="pi pi-pencil" class="p-button-rounded p-button-help p-button-outlined" (click)="showEditModal(product)"></button>
       </td>
       <td>
        <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined"
        (click)="deleteProduct(product)"></button>
       </td>
         
        
      
      </tr>
    </ng-template>
  </p-table>
</p-card>

<app-add-edit-product 
[displayAddEditModal]="displayAddEditModal"
[selectedProduct]="selectedProduct"
(clickClose)="hideAddModal($event)"
(clickAddEdit)="saveOrUpdateProductToList($event)"

>

</app-add-edit-product>

<p-confirmDialog header="Delete"></p-confirmDialog>