Angular中基于Primeng的HTML转可搜索PDF（样式失效问题）

需求与问题 #

需求：在Angular项目中使用PrimeNG组件库，通过NPM的PDF工具将DOM导出为可搜索的PDF，不接受DOM转图片的方案。
问题：当前代码能导出HTML内容，但PrimeNG组件（如表格、标签）的CSS样式无法在PDF中生效。

用户提供代码 #

TypeScript代码 #

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
import { CardModule } from 'primeng/card';
import jsPDF from 'jspdf';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import htmlToPdfmake from 'html-to-pdfmake';

import { NgxPrintElementService, Config, NgxPrintElementModule } from 'ngx-print-element';
import { TagModule } from 'primeng/tag';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ButtonModule, TableModule, CardModule, NgxPrintElementModule, TagModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  @ViewChild('pdfContent', { static: true }) pdfContent!: any;
  @ViewChild('tableRef') tableElement: any;
  constructor(private renderer: Renderer2, public print: NgxPrintElementService) {
  }

  // 模拟数据
  products: any[] = [
    {
      id: '1000',
      code: 'f230fh0g3',
      name: 'Bamboo Watch',
      description: 'Product Description',
      image: 'bamboo-watch.jpg',
      price: 65,
      category: 'Accessories',
      quantity: 24,
      inventoryStatus: 'INSTOCK',
      rating: 5
    },
    {
      id: '1001',
      code: 'nvklal433',
      name: 'Black Watch',
      description: 'Product Description',
      image: 'black-watch.jpg',
      price: 72,
      category: 'Accessories',
      quantity: 61,
      inventoryStatus: 'OUTOFSTOCK',
      rating: 4
    },
    {
      id: '1002',
      code: 'zz21cz3c1',
      name: 'Blue Band',
      description: 'Product Description',
      image: 'blue-band.jpg',
      price: 79,
      category: 'Fitness',
      quantity: 2,
      inventoryStatus: 'LOWSTOCK',
      rating: 3
    }, 
  ];
  title = 'pdf-application';
 
  generatePDF(el: ElementRef<HTMLTableElement | HTMLElement>) {
    const doc = new jsPDF();
    const pdfTable = this.tableElement.nativeElement;
    var html = htmlToPdfmake(pdfTable.innerHTML);
    const documentDefinition = {
      content: html
    };
    pdfMake.createPdf(documentDefinition).download();
  }
}

HTML代码 #

<p-button (onClick)="generatePDF(tableElement)" [rounded]="true" label="Download PDF" severity="success"></p-button>
<!-- Table -->
<div #tableRef class="myClass" id="content-to-pdf">
  <p-table [value]="products" [tableStyle]="{ 'max-width': '50rem','margin':'0 auto' }">
    <ng-template pTemplate="header">
      <tr>
        <th>Code</th>
        <th>Name</th>
        <th>Category</th>
        <th>Quantity</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
      <tr>
        <td>{{ product?.code || "--"}}</td>
        <td>{{ product?.name || "--" }}</td>
        <td>{{ product?.category || "--"}}</td>
        <td>{{ product?.quantity || "--"}}</td>
      </tr>
    </ng-template>
  </p-table>
  <p-tag>Hello </p-tag>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ullam dignissimos laudantium accusamus et id praesentium dolorum quasi voluptate corporis sunt culpa pariatur aspernatur ab deserunt, aperiam quisquam, porro labore quae exercitationem nemo velit nam perspiciatis ad? Dicta, odit magni voluptatibus nemo ipsam earum numquam, amet pariatur impedit sunt praesentium sed soluta at. Alias asperiores minus optio quam enim deserunt, hic quis aut id fuga adipisci nobis iste harum totam dolores rerum, accusantium, quos maxime possimus tempore laborum architecto a sequi vero? Mollitia delectus maiores voluptates sed perferendis excepturi, facilis exercitationem eaque rerum autem quidem ut ab animi. Reiciendis perspiciatis sint odit blanditiis voluptas aspernatur voluptates iure assumenda eos! Placeat eos a cum aliquam beatae delectus iure eligendi, ea molestias. </p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ullam dignissimos laudantium accusamus et id praesentium dolorum quasi voluptate corporis sunt culpa pariatur aspernatur ab deserunt, aperiam quisquam, porro </p>
</div>

解决方法 #

原因说明 #

当前代码仅提取了DOM的innerHTML，但PrimeNG的样式要么封装在组件的Shadow DOM中，要么是全局样式，htmlToPdfmake无法自动捕获这些样式；同时pdfMake本身对CSS的原生支持有限，需要手动适配。

方案1：手动为pdfMake注入样式 #

通过在pdfMake的文档定义中添加样式规则，并手动映射到对应的DOM元素，模拟PrimeNG的核心样式：

修改generatePDF方法及添加辅助函数：

generatePDF(el: ElementRef<HTMLTableElement | HTMLElement>) {
  const pdfTable = this.tableElement.nativeElement;
  const html = htmlToPdfmake(pdfTable.innerHTML);

  // 定义pdfMake支持的样式，匹配PrimeNG组件的核心视觉效果
  const styles = {
    tableHeader: {
      bold: true,
      fillColor: '#f5f5f5',
      fontSize: 12,
      padding: 5
    },
    tableCell: {
      padding: 5,
      fontSize: 11,
      borderColor: '#ddd'
    },
    tagStyle: {
      backgroundColor: '#e3f2fd',
      color: '#1976d2',
      padding: '2px 8px',
      borderRadius: '4px',
      fontSize: 11,
      display: 'inline-block'
    }
  };

  // 为HTML内容匹配对应样式
  const styledContent = this.mapStylesToContent(html, styles);

  const documentDefinition = {
    content: styledContent,
    styles: styles
  };

  pdfMake.createPdf(documentDefinition).download('exported.pdf');
}

/**
 * 遍历htmlToPdfmake生成的内容结构，为表格、标签等元素绑定样式
 */
private mapStylesToContent(content: any[], styles: any): any[] {
  return content.map(item => {
    // 处理表格
    if (item.table) {
      return {
        ...item,
        headerRows: 1,
        widths: ['*', '*', '*', '*'], // 根据实际列数调整宽度比例
        body: item.body.map((row: any[], rowIndex: number) => {
          return row.map((cell: any) => ({
            ...cell,
            style: rowIndex === 0 ? 'tableHeader' : 'tableCell',
            border: [true, true, true, true]
          }));
        })
      };
    }
    // 处理p-tag元素
    else if (item.text && item.text.trim() === 'Hello') {
      return {
        ...item,
        style: 'tagStyle'
      };
    }
    return item;
  });
}

方案2：使用dom-to-image转SVG导出（保留样式+可搜索） #

该方案将DOM转为SVG格式后插入PDF，既能完整保留PrimeNG的样式，又保证文本可搜索：

1. 安装依赖：

npm install dom-to-image

2. 修改组件代码：

import domtoimage from 'dom-to-image';

// ...其他代码

generatePDF(el: ElementRef<HTMLTableElement | HTMLElement>) {
  const targetElement = this.tableElement.nativeElement;

  domtoimage.toSvg(targetElement)
    .then((svgUrl: string) => {
      const pdf = new jsPDF('p', 'mm', 'a4');
      const imgProps = pdf.getImageProperties(svgUrl);
      const pageWidth = pdf.internal.pageSize.getWidth();
      const pageHeight = (imgProps.height * pageWidth) / imgProps.width;

      // 将SVG添加到PDF
      pdf.addImage(svgUrl, 'SVG', 0, 0, pageWidth, pageHeight);
      pdf.save('styled-export.pdf');
    })
    .catch(err => {
      console.error('PDF生成失败:', err);
    });
}

注意：SVG格式的内容在PDF中是可搜索的，完全符合需求，且样式还原度极高。

方案3：后端生成（wkhtmltopdf） #

如果项目允许后端参与，可使用wkhtmltopdf工具（Node.js封装为wkhtmltopdf包），它能完整解析HTML和CSS，生成样式完美的可搜索PDF。但该方案需要后端部署对应工具，适合复杂样式场景。

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