如何提升jsPDF与html2canvas生成的PDF质量？

问题本质 #

你当前用html2canvas+jsPDF生成PDF的逻辑，是把页面DOM渲染成图片再转PDF，文本会被光栅化处理，这就是文本画质模糊、不够清晰的核心原因——图片转PDF无法保留矢量文本的原生清晰度。而你对比的高质量PDF工具，是直接基于矢量排版生成，文本是可编辑的矢量元素，所以放大后依然清晰。

解决办法 #

1. 替换为矢量PDF生成库（推荐） #

放弃光栅化方案，改用直接生成矢量PDF的工具：

• react-pdf：专为React设计，用组件语法定义PDF内容，直接输出矢量PDF，完全解决清晰度问题。核心示例代码：

import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
import { PDFDownloadLink } from '@react-pdf/renderer';

// 定义PDF样式
const styles = StyleSheet.create({
  page: { padding: 40 },
  header: { fontSize: 16, fontWeight: 'bold', marginBottom: 20 },
  contentText: { fontSize: 12, margin: '5px 0' }
});

// 构建PDF内容组件
const InvoicePDF = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View>
        <Text style={styles.header}>Invoice</Text>
        <Text style={styles.contentText}>客户名称: XXX</Text>
        <Text style={styles.contentText}>订单金额: $XXX</Text>
      </View>
    </Page>
  </Document>
);

// 下载按钮使用
const DownloadButton = () => (
  <PDFDownloadLink document={<InvoicePDF />} fileName="invoice.pdf">
    {({ loading }) => loading ? '生成中...' : '下载PDF'}
  </PDFDownloadLink>
);

• 服务端方案：如果项目允许，用wkhtmltopdf这类工具在后端把HTML转矢量PDF，前端调用接口下载，质量和专业工具一致。

2. 现有方案的临时优化 #

如果暂时无法替换库，调整参数提升画质：

• 提高html2canvas的缩放比例，让生成的图片分辨率翻倍：

html2canvas(document.getElementById('invoice'), {
  scale: 2, // 放大2倍渲染，提升清晰度
  useCORS: true
}).then(canvas => {
  const pdf = new jsPDF('p', 'px', 'a4');
  // 按canvas实际尺寸添加图片
  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, canvas.width, canvas.height);
  pdf.save('invoice.pdf');
});

验证标准 #

修改后检查：

• 生成的PDF文本是否可选中（矢量PDF的特征）
• 放大200%后是否无锯齿（光栅化方案即使优化，放大后依然会模糊）

内容的提问来源于stack exchange，提问作者Khant Min Si Thu