React Native如何将动态尺寸ScrollView的全部内容导出为PDF

现有方案适用性判断 #

• react-pdf（即@react-pdf/renderer）的适配场景：该方案适合你可以用其提供的专属原生组件重写ScrollView内所有内容的场景，导出的PDF为矢量格式，清晰度更高、文件体积更小。但如果你的ScrollView内部包含复杂原生组件、动态渲染内容、特殊样式效果，重写成本会极高，这种场景下不推荐使用。
• react-native-view-shot对ScrollView的支持：你之前的认知存在偏差，该库v3.0及以上版本已原生支持完整截取ScrollView的全部滚动内容，无需手动滚动处理，内部会自动读取ScrollView的contentSize动态计算截图范围，完全适配你尺寸动态变化的场景。

推荐实现方案（截图转PDF，低适配成本） #

该方案无需重写原有视图内容，直接基于现有渲染结果生成PDF，适配绝大多数业务场景，实现步骤如下：

1. 安装依赖
   需要安装三个工具库：视图截图的react-native-view-shot、图片转PDF的react-native-image-to-pdf，以及处理文件存储权限的react-native-permissions（用于iOS/Android的存储权限申请）。
2. 基础配置

• iOS端需要在info.plist中新增相册写权限配置
• Android端需要在AndroidManifest.xml中新增存储读写权限配置

3. 核心代码实现
   首先给目标ScrollView绑定ref：

import { useRef } from 'react';
import { ScrollView, Button } from 'react-native';
import { captureRef } from 'react-native-view-shot';
import RNImageToPdf from 'react-native-image-to-pdf';

const DemoPage = () => {
  // 绑定ScrollView的ref
  const scrollViewRef = useRef(null);

  const handleExportPdf = async () => {
    try {
      // 第一步：截取ScrollView完整长图
      const fullImageUri = await captureRef(scrollViewRef, {
        format: 'png',
        quality: 0.9,
        // 核心参数：开启ScrollView全内容截取
        captureScrollViewContent: true
      });

      // 第二步：将长图转为PDF文件
      const pdfResult = await RNImageToPdf.createPDFbyImages({
        imagePaths: [fullImageUri],
        name: `scrollview_export_${Date.now()}.pdf`,
        // 可调整PDF最大宽高，避免长图过大触发内存溢出
        maxSize: 2048
      });

      // 生成成功后可自行实现保存到本地、分享给用户等逻辑
      console.log('PDF生成完成，本地路径：', pdfResult.filePath);
    } catch (err) {
      console.error('PDF导出失败：', err);
    }
  };

  return (
    <>
      <Button title="导出PDF" onPress={handleExportPdf} />
      <ScrollView ref={scrollViewRef}>
        {/* 原有动态尺寸的ScrollView内容 */}
      </ScrollView>
    </>
  )
}

特殊场景优化 #

如果你的ScrollView内容长度超过10个屏幕高度，直接全量截图可能会触发大内存占用导致闪退，建议将内容拆分为多个片段分别截图，再将多张图片按顺序插入到同一个PDF的不同页面即可。

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