react-pdf v3下载PDF损坏问题：部分阅读器无法渲染的原因及解决方案

• PDF规范兼容性差异：react-pdf v3生成的PDF可能采用了较新的PDF特性，或生成过程中未严格遵循旧版PDF规范。Adobe Acrobat和Microsoft Edge的PDF渲染引擎对规范的兼容性要求更严格，而Google Chrome及Google Drive的渲染引擎容错性更强，能自动修复部分不符合规范的内容。
• 字体嵌入不完整：若PDF使用了非系统默认字体，react-pdf可能未完整嵌入字体文件。严格的渲染引擎无法识别缺失的字体数据，而Chrome等会自动 fallback 到系统字体完成渲染。
• PDF结构存在缺陷：生成的PDF可能存在对象引用错误、交叉引用表损坏等小问题，Chrome的渲染引擎可以自动修复这些问题，而Acrobat和Edge则直接拒绝渲染不符合规范的PDF。

• 确保字体完整嵌入：使用Font组件注册字体时，指定完整的字体文件路径，避免使用子集化不完整的字体文件。示例代码：

import { Font } from '@react-pdf/renderer';
Font.register({
  family: 'CustomFont',
  src: './fonts/CustomFont-Regular.ttf',
});

• 指定兼容的PDF版本：在Document组件中设置较低的PDF版本（如1.5），让生成的PDF适配更广泛的渲染引擎。示例：

import { Document } from '@react-pdf/renderer';

const MyPDF = () => (
  <Document version="1.5">
    {/* 你的PDF内容组件 */}
  </Document>
);

• 优化PDF内容结构：避免复杂的组件嵌套，确保所有元素的尺寸、定位符合PDF规范，比如不要设置负数坐标、不要放置超出页面范围的元素。
• 正确生成Blob文件：下载PDF时，确保生成的Blob MIME类型为application/pdf，避免因类型错误导致渲染异常。示例代码：

import { pdf } from '@react-pdf/renderer';
import MyPDF from './MyPDF';

const handleDownload = async () => {
  const pdfBlob = await pdf(<MyPDF />).toBlob();
  const downloadUrl = URL.createObjectURL(pdfBlob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'my-document.pdf';
  link.click();
  URL.revokeObjectURL(downloadUrl);
};

• 升级react-pdf补丁版本：react-pdf v3的部分旧版本存在已知的PDF生成bug，尝试升级到v3的最新补丁版本，可修复部分兼容性问题。

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