基于Expo的React Native App如何将PDF第一页渲染为图片？

在Expo环境下，有两种可靠的方式实现PDF第一页转图片的需求：

方式一：expo-pdf渲染+expo-view-shot截图 #

这种方式无需额外原生配置，完全基于Expo SDK，适合快速落地：

1. 安装依赖：

npx expo install expo-pdf expo-view-shot

2. 实现逻辑：

• 用DocumentPicker获取PDF本地URI
• 用Pdf组件渲染第一页（设置pageNumber={1}），并将组件放入可被截图的视图容器
• 调用captureRef捕获视图生成图片URI

示例代码：

import React, { useRef, useState } from 'react';
import { View, Button, Image } from 'react-native';
import * as DocumentPicker from 'expo-document-picker';
import { Pdf } from 'expo-pdf';
import { captureRef } from 'expo-view-shot';

export default function App() {
  const pdfRef = useRef(null);
  const [pdfUri, setPdfUri] = useState(null);
  const [imageUri, setImageUri] = useState(null);

  const pickDocument = async () => {
    const result = await DocumentPicker.getDocumentAsync({
      type: 'application/pdf',
    });
    if (!result.canceled) {
      setPdfUri(result.assets[0].uri);
      // 等PDF渲染完成后再截图，可根据实际调整时长或监听加载状态
      setTimeout(async () => {
        const uri = await captureRef(pdfRef, {
          format: 'png',
          quality: 0.8,
        });
        setImageUri(uri);
      }, 1000);
    }
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Button title="选择PDF文件" onPress={pickDocument} />
      {pdfUri && (
        <View ref={pdfRef} style={{ height: 400, marginTop: 20 }}>
          <Pdf
            source={{ uri: pdfUri }}
            pageNumber={1}
            style={{ flex: 1 }}
          />
        </View>
      )}
      {imageUri && (
        <Image
          source={{ uri: imageUri }}
          style={{ height: 400, marginTop: 20, resizeMode: 'contain' }}
        />
      )}
    </View>
  );
}

方式二：expo-print后台转换 #

expo-print提供了直接将PDF转为图片的API，适合无需渲染PDF视图、后台处理的场景：

1. 安装依赖：

npx expo install expo-print

2. 实现逻辑：

• 获取PDF URI后，调用Print.printToFileAsync，指定转换格式为PNG并仅处理第一页

示例代码：

import React, { useState } from 'react';
import { View, Button, Image } from 'react-native';
import * as DocumentPicker from 'expo-document-picker';
import * as Print from 'expo-print';

export default function App() {
  const [imageUri, setImageUri] = useState(null);

  const pickAndConvertPdf = async () => {
    const result = await DocumentPicker.getDocumentAsync({
      type: 'application/pdf',
    });
    if (!result.canceled) {
      const pdfUri = result.assets[0].uri;
      const { uri } = await Print.printToFileAsync({
        uri: pdfUri,
        format: 'png',
        pageIndexes: [0], // 仅转换第一页（索引从0开始）
        quality: 0.8,
      });
      setImageUri(uri);
    }
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Button title="选择并转换PDF第一页" onPress={pickAndConvertPdf} />
      {imageUri && (
        <Image
          source={{ uri: imageUri }}
          style={{ height: 400, marginTop: 20, resizeMode: 'contain' }}
        />
      )}
    </View>
  );
}

关于pdf-lib的说明 #

pdf-lib主打PDF的编辑、合并等文档操作，本身不具备PDF渲染为图片的能力——它依赖浏览器Canvas或原生渲染引擎，在Expo/React Native环境下无法直接完成渲染转换，因此不适合你的需求。

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