Angular TypeScript 12 点击按钮下载PDF时jsPDF样式损坏如何解决

现有jsPDF方案修复 #

jsPDF的html()方法默认不支持读取Angular组件封装样式、外部样式表，仅能识别元素行内样式，是样式丢失的核心原因，可按以下步骤修复：

• 调整组件视图封装：将导出内容所属组件的ViewEncapsulation改为None，或者把导出区域相关的样式统一写到全局styles.css中，避免Angular自动添加的属性选择器无法被jsPDF识别
• 补充html()方法的配置参数，提升兼容性，修改后代码如下：

downloadPDF() {
  const pdf = new jsPDF('p', 'pt', 'a4');
  pdf.html(this.el.nativeElement, {
    x: 10, // 导出内容左边距
    y: 10, // 导出内容上边距
    scale: 2, // 提升导出清晰度
    useCORS: true, // 支持跨域资源（如图片、字体）
    callback: (pdf) => {
      pdf.save("invoice.pdf");
    }
  });
}

如果调整后样式仍不符合预期，推荐改用html2canvas + jsPDF的组合方案，该方案先将DOM转为画布，完全还原页面渲染效果，再插入PDF，兼容性更强：

1. 安装依赖：npm install html2canvas jspdf
2. 替换导出代码：

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

async downloadPDF() {
  const targetEl = this.el.nativeElement;
  // 先将目标DOM转为canvas，1:1还原页面样式
  const canvas = await html2canvas(targetEl, {
    scale: 2,
    useCORS: true,
    logging: false
  });
  // 计算A4尺寸下的图片宽高
  const a4Width = 595.28; // A4纸宽度（单位pt）
  const a4Height = canvas.height * a4Width / canvas.width;
  const pdf = new jsPDF('p', 'pt', 'a4');
  // 将canvas转为图片插入PDF
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, a4Width, a4Height);
  // 若内容超过1页，可自行计算高度循环调用pdf.addPage()添加多页内容
  pdf.save('invoice.pdf');
}

更简单的替代方案 #

如果可以接受用户在打印弹窗手动选择保存为PDF，优先用浏览器原生打印方案，无需引入任何第三方依赖，样式还原度100%：

1. 在全局styles.css中添加打印专属样式：

@media print {
  /* 隐藏不需要导出的元素，比如导航栏、下载按钮 */
  .no-print {
    display: none !important;
  }
  /* 配置打印纸张参数 */
  @page {
    size: A4;
    margin: 1cm;
  }
}

2. 给不需要导出的元素添加no-print类名，组件中导出方法直接调用系统打印：

downloadPDF() {
  window.print();
}

用户在弹出的打印窗口中选择「保存为PDF」即可完成导出。

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