react-native-pdf-view技术问题：如何通过blobId填充PDFView

核心思路 #

接口返回的blobId是获取PDF二进制数据的标识，需先通过该ID请求后端拿到PDF的Blob数据，再转换为react-native-pdf-view支持的格式（Base64或本地文件路径）进行展示。

步骤1：通过blobId获取PDF二进制Blob #

调用后端接口，传入blobId获取PDF的Blob数据：

const fetchPDFBlob = async (blobId) => {
  const response = await fetch(`你的后端接口地址/${blobId}`, {
    method: 'GET',
    // 根据后端要求添加认证头，比如：
    // headers: { Authorization: `Bearer ${token}` }
  });
  return await response.blob();
};

步骤2：转换Blob为Base64格式 #

react-native-pdf-view支持Base64格式的数据源，将Blob转换为纯Base64字符串（去掉前缀）：

const blobToBase64 = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      // 拆分出纯Base64部分
      const pureBase64 = reader.result.split(',')[1];
      resolve(pureBase64);
    };
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
};

步骤3：在组件中渲染PDFView #

结合上述函数，在React组件中加载并展示PDF：

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
import PDFView from 'react-native-pdf-view';

const PDFDisplay = ({ blobId }) => {
  const [pdfSource, setPdfSource] = useState(null);

  useEffect(() => {
    const loadPDF = async () => {
      try {
        const pdfBlob = await fetchPDFBlob(blobId);
        const base64Data = await blobToBase64(pdfBlob);
        setPdfSource(base64Data);
      } catch (err) {
        console.error('PDF加载失败:', err);
      }
    };

    loadPDF();
  }, [blobId]);

  if (!pdfSource) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>PDF加载中...</Text>
      </View>
    );
  }

  return (
    <PDFView
      style={{ flex: 1 }}
      resource={pdfSource}
      resourceType="base64"
    />
  );
};

export default PDFDisplay;

大文件优化方案（本地文件路径加载） #

如果PDF文件较大，建议将Blob保存到本地文件，通过本地路径加载以减少内存占用：

1. 安装react-native-fs依赖：npm install react-native-fs --save
2. 添加保存文件的函数：

import RNFS from 'react-native-fs';

const saveBlobToLocal = async (blob, fileName) => {
  const base64Data = await blobToBase64(blob);
  const localFilePath = `${RNFS.DocumentDirectoryPath}/${fileName}`;
  await RNFS.writeFile(localFilePath, base64Data, 'base64');
  return localFilePath;
};

3. 修改组件中的加载逻辑：

useEffect(() => {
  const loadPDF = async () => {
    try {
      const pdfBlob = await fetchPDFBlob(blobId);
      // 使用接口返回的name作为文件名
      const localPath = await saveBlobToLocal(pdfBlob, 'ABC02_A_20190421_0900_0000001.001');
      setPdfSource(localPath);
    } catch (err) {
      console.error('PDF加载失败:', err);
    }
  };

  loadPDF();
}, [blobId]);

4. 修改PDFView的属性：

<PDFView
  style={{ flex: 1 }}
  resource={pdfSource}
  resourceType="path"
/>

注意事项 #

• 确保后端接口支持通过blobId返回PDF的二进制数据
• 按需添加请求头认证信息，避免接口请求失败
• 处理加载异常，给用户友好的错误提示

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