Angular中html2pdf处理大数据生成空白页及替代PDF打印方案咨询

以下是几种可行的PDF生成/打印方案，可应对大数据量场景避免空白页问题：

1. 直接使用 jsPDF 构建内容 #

跳过html转canvas的步骤，直接通过jsPDF的API手动绘制文本、表格、图片等内容，完全控制PDF结构，适合结构化数据场景。

示例代码（Angular中）：

import jsPDF from 'jspdf';
import 'jspdf-autotable'; // 用于生成表格

generatePDF() {
  const doc = new jsPDF('portrait', 'in', 'letter');
  const footerText = '自定义页脚内容';
  
  // 添加标题
  doc.setFontSize(16);
  doc.text('大数据量报表', 4.25, 0.5); // 居中定位

  // 添加表格（使用jspdf-autotable）
  const tableData = [
    ['列1', '列2', '列3'],
    // 大量数据行...
  ];
  (doc as any).autoTable({
    head: [tableData[0]],
    body: tableData.slice(1),
    startY: 1,
    margin: { left: 0.2, right: 0.2 },
    styles: { fontSize: 10 }
  });

  // 添加页码和页脚
  const totalPages = doc.internal.getNumberOfPages();
  for (let i = 1; i <= totalPages; i++) {
    doc.setPage(i);
    // 页脚文本
    doc.setFontSize(10);
    doc.setTextColor(60, 81, 146);
    doc.text(footerText, 0.3, doc.internal.pageSize.getHeight() - 0.3);
    // 页码
    doc.setFontSize(8);
    doc.setTextColor(150);
    doc.text(`Page ${i}/${totalPages}`, doc.internal.pageSize.getWidth() / 2, doc.internal.pageSize.getHeight() - 0.3, { align: 'center' });
  }

  // 打开PDF
  window.open(doc.output('bloburl'), '_blank');
}

2. 使用 ngx-pdf-make（基于 pdfmake） #

pdfmake是声明式的PDF生成库，ngx-pdf-make为Angular提供了封装，通过定义JSON格式的文档结构来生成PDF，支持复杂布局、样式定制，适合需要精细排版的场景。

步骤：

1. 安装依赖：npm install pdfmake ngx-pdf-make --save
2. 示例代码：

import { PdfMakeWrapper, Txt, Table, Footer } from 'ngx-pdf-make';

generatePDF() {
  const pdf = new PdfMakeWrapper();
  pdf.pageSize('letter');
  pdf.pageMargins([0.2, 0.2, 0.2, 0.5]); // 预留页脚空间

  // 添加标题
  pdf.add(new Txt('大数据量报表').fontSize(16).alignment('center').end);

  // 添加表格
  const tableData = [
    ['列1', '列2', '列3'],
    // 大量数据行...
  ];
  pdf.add(new Table(tableData).widths(['*', '*', '*']).fontSize(10).end);

  // 添加页脚和页码
  pdf.footer(new Footer().add(
    new Txt('自定义页脚内容').fontSize(10).color('#3c5192').end,
    new Txt('页码: {page} / {totalPages}').fontSize(8).color('#969696').alignment('right').end
  ).end);

  // 生成并打开PDF
  pdf.create().open();
}

3. 浏览器原生打印（结合CSS媒体查询） #

直接利用浏览器的原生打印功能，通过CSS控制打印时的样式、分页和元素显示/隐藏，无需额外依赖，适合简单的打印场景。

步骤：

1. 添加打印按钮和打印目标元素：

<button (click)="triggerPrint()">打印报表</button>
<div id="print-content">
  <!-- 你的大数据内容（表格、文本等） -->
</div>

2. 编写打印样式（在全局样式或组件样式中）：

@media print {
  body * {
    visibility: hidden;
  }
  #print-content, #print-content * {
    visibility: visible;
  }
  #print-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  /* 控制分页：避免表格跨页断裂 */
  table { page-break-inside: avoid; }
  /* 添加页脚页码（通过CSS伪元素） */
  @page {
    margin: 0.2in;
    @bottom-center {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 8px;
      color: #969696;
    }
    @bottom-left {
      content: "自定义页脚内容";
      font-size: 10px;
      color: #3c5192;
    }
  }
}

3. 打印触发函数：

triggerPrint() {
  window.print();
}

4. 服务端生成PDF（如 wkhtmltopdf） #

如果前端生成PDF遇到性能或渲染问题（如大数据量导致的空白页），可将HTML内容或数据发送到后端，使用wkhtmltopdf、Prince等工具生成PDF后返回给前端，前端再处理下载或打开。

示例代码（Angular中调用接口）：

import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private http: HttpClient) {}

generatePDF() {
  const reportData = { /* 你的报表数据 */ };
  const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

  this.http.post('/api/generate-pdf', reportData, { headers, responseType: 'blob' })
    .subscribe(blob => {
      const blobUrl = URL.createObjectURL(blob);
      window.open(blobUrl, '_blank');
      // 释放URL对象
      setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
    });
}

后端可通过wkhtmltopdf将接收的HTML模板渲染为PDF，或直接根据数据生成PDF返回。

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