一、核心实现方案与技术选型

前端实现PDF下载的核心逻辑可分为两类：依赖后端接口和纯前端生成。前者通过调用后端服务获取PDF文件流，后者利用前端库直接生成PDF内容。两种方案各有适用场景，需结合业务需求选择。

1.1 后端接口调用方案

当PDF文件由后端动态生成（如报表、合同）时，前端需通过接口获取文件流并触发下载。关键步骤如下：

1.1.1 接口请求与响应处理

使用fetch或axios发送GET/POST请求，需注意响应类型为blob（二进制流）：

async function downloadPdfFromBackend() {
  try {
    const response = await fetch('/api/pdf', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ reportId: 123 })
    });
    if (!response.ok) throw new Error('请求失败');
    const blob = await response.blob();
    return blob;
  } catch (error) {
    console.error('下载失败:', error);
  }
}

1.1.2 触发浏览器下载

通过创建临时<a>标签并设置download属性，实现无感知下载：

function triggerDownload(blob, filename = 'report.pdf') {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  URL.revokeObjectURL(url); // 释放内存
  document.body.removeChild(a);
}

1.1.3 兼容性优化

• IE11支持：需使用navigator.msSaveOrOpenBlob(blob, filename)。
• 大文件处理：分块请求（Range Header）或压缩传输（GZIP）。

1.2 纯前端生成方案

适用于静态内容或简单动态内容（如订单确认页），常用库包括：

• jsPDF：轻量级库，支持文本、图片、表格生成。
• pdf-lib：高级编辑库，可修改现有PDF。
• html2canvas + jsPDF：将HTML转为Canvas后生成PDF。

1.2.1 使用jsPDF生成文本PDF

import { jsPDF } from 'jspdf';
function generateSimplePdf() {
  const doc = new jsPDF();
  doc.text('Hello PDF!', 10, 10);
  doc.save('generated.pdf');
}

1.2.2 HTML转PDF的完整流程

结合html2canvas捕获DOM，再通过jsPDF生成：

import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';
async function htmlToPdf(elementId, filename) {
  const element = document.getElementById(elementId);
  const canvas = await html2canvas(element, { scale: 2 }); // 提高分辨率
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF({
    orientation: element.clientWidth > element.clientHeight ? 'l' : 'p'
  });
  const imgProps = pdf.getImageProperties(imgData);
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
  pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
  pdf.save(filename || 'document.pdf');
}

二、进阶优化与问题解决

2.1 性能优化

• 分页处理：长内容需手动分页（jsPDF的addPage()方法）。
• 懒加载图片：确保HTML中的图片已加载完成再转PDF。
• Web Worker：将生成逻辑放在Worker中避免主线程阻塞。

2.2 常见问题解决方案

2.2.1 中文乱码

jsPDF默认不支持中文，需引入中文字体：

import { jsPDF } from 'jspdf';
import 'jspdf-customfonts';
// 引入字体文件（需提前转换）
const doc = new jsPDF({
  unit: 'mm',
  format: 'a4',
  font: 'simsun' // 自定义字体名
});
doc.addFont('simsun.ttf', 'simsun', 'normal');
doc.setFont('simsun');
doc.text('中文测试', 10, 10);

2.2.2 跨域问题

若PDF来自不同域，需后端设置CORS头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST

三、安全与合规建议

1. 敏感数据保护：下载前验证用户权限，避免未授权访问。
2. 文件名安全：对用户输入的文件名进行转义，防止路径遍历攻击。
3. 流量控制：大文件下载时显示进度条（通过XMLHttpRequest的progress事件）。

四、实际案例：电商订单PDF生成

某电商平台需生成带水印的订单PDF，解决方案如下：

1. 后端生成基础PDF：使用iText（Java）生成含订单信息的PDF。
2. 前端添加水印：通过pdf-lib在客户端叠加水印层：
   ```javascript
   import { PDFDocument, rgb } from ‘pdf-lib’;

async function addWatermark(pdfBytes, watermarkText) {
const pdfDoc = await PDFDocument.load(pdfBytes);
const pages = pdfDoc.getPages();

pages.forEach(page => {
const { width, height } = page.getSize();
page.drawText(watermarkText, {
x: width / 2 - 50,
y: height / 2,
size: 30,
color: rgb(0.9, 0.9, 0.9), // 浅灰色
opacity: 0.5,
rotate: degrees(-45)
});
});

const modifiedPdfBytes = await pdfDoc.save();
return modifiedPdfBytes;
}
```

五、总结与选型建议

方案	适用场景	复杂度	性能
后端接口	动态内容、大文件	低	高
jsPDF	简单文本/表格	中	中
html2canvas	页面截图转PDF	高	低
pdf-lib	PDF二次编辑	高	中

推荐实践：

1. 优先使用后端生成复杂PDF，前端仅负责下载触发。
2. 静态内容可选用jsPDF或html2canvas，注意分页与字体支持。
3. 对安全性要求高的场景，避免在前端暴露原始PDF数据。

通过合理选择技术方案，前端开发者可高效实现PDF下载功能，同时兼顾性能与用户体验。