React Native使用react-native-html-to-pdf生成PDF无法查看及分享问题求助

问题1：生成的PDF在cache文件夹找不到的解决 #

首先说明原因：react-native-html-to-pdf默认生成的文件存储在应用私有沙盒的cache目录，安卓系统下普通文件管理器没有权限访问其他应用的私有目录，并非文件没有生成。
解决方案：

• 验证文件是否真实生成：可以安装react-native-fs库，调用RNFS.exists(file.filePath)打印结果，返回true即代表文件生成成功
• 如需在公共文件目录可见生成的PDF，在生成参数options中新增directory: 'Documents'配置，文件就会保存到公共文档目录；安卓6.0及以上版本需要提前申请存储读写权限，可通过PermissionsAndroid申请READ_EXTERNAL_STORAGE和WRITE_EXTERNAL_STORAGE权限。

问题2：Share接口输出[object Object]无法分享的解决 #

原因：RNHTMLtoPDF.convert返回的file是对象类型，直接用模板字符串转义会变成[object Object]，且React Native自带的Share组件仅支持分享文本，不支持直接分享本地文件。
解决方案：

• 首先通过file.filePath拿到字符串格式的文件路径
• 替换自带Share组件为支持本地文件分享的react-native-share库，调用示例如下：

import Share from 'react-native-share';

// 替换原有分享逻辑
const shareOptions = {
  title: 'This is my report',
  subject: 'Report',
  url: `file://${file.filePath}`, // 必须加file://前缀标记本地文件
  type: 'application/pdf'
};
await Share.open(shareOptions);

修复后的完整代码示例 #

import React, { Component } from 'react';
import { View, TouchableHighlight, Text, PermissionsAndroid, Platform } from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';
import Share from 'react-native-share';
import RNFS from 'react-native-fs';

export default class Example extends Component {
  // 安卓权限申请逻辑
  requestStoragePermission = async () => {
    if (Platform.OS !== 'android') return true;
    try {
      const granted = await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      ]);
      return Object.values(granted).every(item => item === PermissionsAndroid.RESULTS.GRANTED);
    } catch (err) {
      console.warn(err);
      return false;
    }
  };

  createPDF = async () => {
    const hasPermission = await this.requestStoragePermission();
    if (!hasPermission) return alert('请先开启存储权限');

    let options = {
      html: "<h1>PDF TEST</h1>",
      fileName: "test",
      directory: 'Documents', // 存储到公共目录
    };
    let file = await RNHTMLtoPDF.convert(options);
    // 验证文件生成状态
    const fileExists = await RNFS.exists(file.filePath);
    console.log('文件是否存在：', fileExists, '文件路径：', file.filePath);

    // 分享PDF
    const shareOptions = {
      title: "This is my report ",
      subject: "Report",
      url: `file://${file.filePath}`,
      type: 'application/pdf'
    };
    try {
      await Share.open(shareOptions);
    } catch (e) {
      console.log('分享取消或失败', e);
    }
  };

  render() {
    return (
      <View>
        <TouchableHighlight onPress={this.createPDF}>
          <Text>Create PDF</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

替代方案推荐 #

如果需要更多自定义能力，也可以选择以下实现方式：

• 用react-native-pdf-lib：支持自定义插入文本、图片、表格等PDF元素，灵活度更高
• 如果需要1:1还原当前React Native页面为PDF，可以先用react-native-view-shot将目标视图截为高清图片，再将图片拼接生成PDF

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