React Native将Base64图片列表生成单个PDF时格式无效问题求助

你的代码核心问题是把HTML字符串直接写入了后缀为.pdf的文件，本质还是纯文本格式，并非符合标准的PDF二进制文件，所以阅读器无法识别。以下是两种可行的解决方案：

方案一：使用react-native-html-to-pdf（基于HTML转PDF） #

这个库可以将包含图片的HTML内容转换成标准PDF文件，步骤如下：

1. 安装依赖

npm install react-native-html-to-pdf --save
# iOS需额外执行
cd ios && pod install && cd ..

2. 修改代码实现

import RNHTMLtoPDF from 'react-native-html-to-pdf';
import RNFS from 'react-native-fs';
import { Platform } from 'react-native';

const externalStorageDirectory =
  Platform.OS === 'android'
    ? RNFS.ExternalStorageDirectoryPath
    : RNFS.DocumentDirectoryPath;

const imageArray = downloadImages.map(item => item.image);

const downloadPdf = async () => {
  try {
    // 构建完整HTML结构，确保Base64图片带正确前缀（如data:image/png;base64,）
    const htmlContent = `
      <html>
        <body style="margin: 0; padding: 10px;">
          ${imageArray.map(img => `<img src="${img}" style="width: 100%; margin-bottom: 15px;" />`).join('')}
        </body>
      </html>
    `;

    const options = {
      html: htmlContent,
      fileName: 'downloaded',
      directory: externalStorageDirectory,
    };

    const pdfResult = await RNHTMLtoPDF.convert(options);
    console.log('PDF生成成功，路径：', pdfResult.filePath);
  } catch (error) {
    console.error('生成PDF失败：', error);
  }
};

downloadPdf();

方案二：使用react-native-pdf-lib（直接操作PDF文档） #

如果需要更精细控制PDF页面布局，推荐用这个库直接将图片添加到PDF页面：

1. 安装依赖

npm install react-native-pdf-lib --save
# iOS需额外执行
cd ios && pod install && cd ..

2. 修改代码实现

import PDFLib, { PDFDocument, PDFPage } from 'react-native-pdf-lib';
import RNFS from 'react-native-fs';
import { Platform } from 'react-native';

const externalStorageDirectory =
  Platform.OS === 'android'
    ? RNFS.ExternalStorageDirectoryPath
    : RNFS.DocumentDirectoryPath;
const finalPdfPath = `${externalStorageDirectory}/downloaded.pdf`;

const downloadPdf = async () => {
  try {
    // 创建空PDF文档
    const pdfDoc = await PDFDocument.create(finalPdfPath);
    
    for (const base64Img of downloadImages.map(item => item.image)) {
      // 处理Base64：如果没有MIME前缀，手动补充（示例为png，根据实际图片格式调整）
      const pureBase64 = base64Img.startsWith('data:image') 
        ? base64Img.split(',')[1] 
        : base64Img;
      
      // 将Base64写入临时图片文件
      const tempImgPath = `${RNFS.TemporaryDirectoryPath}/temp_${Date.now()}.png`;
      await RNFS.writeFile(tempImgPath, pureBase64, 'base64');
      
      // 创建新页面并绘制图片，适配标准PDF尺寸（612x792点）
      const page = await PDFPage.create();
      await page.drawImage(tempImgPath, {
        x: 0,
        y: 0,
        width: 612,
        height: 792,
      });
      
      await pdfDoc.addPage(page);
      // 清理临时文件
      await RNFS.unlink(tempImgPath);
    }
    
    // 保存并关闭PDF文档
    await pdfDoc.save();
    console.log('PDF生成成功，路径：', finalPdfPath);
  } catch (error) {
    console.error('生成PDF失败：', error);
  }
};

downloadPdf();

关键注意事项 #

• Base64前缀检查：确保你的Base64图片字符串包含正确的MIME前缀（如data:image/png;base64,或data:image/jpeg;base64,），否则图片无法被正确渲染。
• 存储权限：Android 13及以上需要申请READ_MEDIA_IMAGES/WRITE_MEDIA_IMAGES权限，iOS需要开启文档访问权限，确保应用能读写外部存储。
• 文件大小验证：如果生成的PDF文件仅几百字节，说明内容未正确转换，检查Base64格式或库的配置是否正确。

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