Expo+React Native中Android分享Base64 PDF为空问题求助

问题原因 #

Android端的Print.printToFileAsync依赖系统WebView渲染HTML内容，但Android WebView对<embed>标签加载Base64格式PDF的支持存在兼容性问题，无法正确解析并渲染PDF内容，最终导致生成的本地PDF文件为空。而iOS的WebView对PDF嵌入的处理更完善，所以能正常生成并分享PDF。

解决方案 #

跳过HTML渲染步骤，直接将Base64格式的PDF解码并保存为本地文件，再通过Sharing模块分享该文件。需要借助expo-file-system来完成文件写入操作。

步骤1：安装依赖 #

如果还未安装expo-file-system，执行以下命令：

npx expo install expo-file-system

步骤2：修改代码 #

替换原有onShare函数，直接处理Base64数据：

import React, { useState } from 'react';
import { ActivityIndicator, Text, View } from 'react-native';
import * as Sharing from 'expo-sharing';
import * as FileSystem from 'expo-file-system';

export default function App() {
  const [loading, setLoading] = useState(false);

  const onShare = async () => {
    setLoading(true);
    try {
      // 提取纯Base64字符串（移除data协议前缀）
      const base64Pdf = "JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G";
      // 生成应用私有目录下的文件路径
      const fileUri = `${FileSystem.documentDirectory}shared.pdf`;
      
      // 将Base64数据写入本地PDF文件
      await FileSystem.writeAsStringAsync(fileUri, base64Pdf, {
        encoding: FileSystem.EncodingType.Base64,
      });

      // 分享生成的PDF文件
      await Sharing.shareAsync(fileUri, {
        mimeType: 'application/pdf',
        dialogTitle: '分享PDF',
      });
    } catch (err) {
      console.log('Sharing::error', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {loading && <ActivityIndicator size="large" />}
      <Text onPress={onShare} style={{ fontSize: 20, marginTop: 20 }}>
        Share
      </Text>
    </View>
  );
}

代码关键点说明 #

• 直接使用纯Base64字符串，避免data:application/pdf;base64,前缀导致的解码错误。
• 利用FileSystem.documentDirectory获取应用私有文档目录，保证文件可正常写入和访问。
• 指定编码类型为Base64，确保系统正确解码数据生成PDF文件。
• 分享时明确指定mimeType，让目标应用能正确识别文件类型。

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