React Native WebView安卓端无法显示PDF/Word文件问题求助

嘿，我之前也碰到过一模一样的问题！iOS端的WebView能正常渲染PDF，但Android端完全空白，这其实是因为Android系统的WebView默认没有内置PDF渲染功能，而iOS的WebKit刚好原生支持PDF的直接展示。在Expo环境下，我们可以用几个简单的方法来修复这个问题：

方法一：使用Google Docs代理渲染（最简单，无需额外依赖） #

Google Docs提供了一个PDF渲染代理服务，能把远程PDF转换成可被Android WebView识别的网页内容。只需要把你的PDF URL包装成Google Docs的嵌入链接即可：

修改后的代码如下：

import * as React from 'react';
import { WebView } from 'react-native';

export default class App extends React.Component {
  render() {
    // 用Google Docs代理包装原PDF链接
    const pdfUrl = 'http://www.africau.edu/images/default/sample.pdf';
    const renderableUrl = `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(pdfUrl)}`;

    return (
      <WebView
        style={{flex: 1, backgroundColor: 'white'}}
        source={{ uri: renderableUrl }}
        bounces={true}
        useWebKit={true}
        scrollEnabled={true}
        // 额外添加Android需要的配置，确保允许加载混合内容（如果原PDF是http协议的话）
        androidHardwareAccelerationDisabled={false}
        allowUniversalAccessFromFileURLs={true}
      />
    );
  }
}

注意事项： #

• 确保设备有网络连接，因为这个方法依赖Google的服务
• 如果你的PDF链接是http协议，需要在Expo项目的app.json中配置android.usesCleartextTraffic: true，允许加载明文内容

方法二：使用专门的PDF渲染库（无第三方依赖，更可控） #

如果你不想依赖外部服务，可以使用Expo支持的react-native-pdf库，这个方法能让你完全控制PDF的渲染和交互：

1. 安装依赖：

expo install react-native-pdf

2. 示例代码：

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import Pdf from 'react-native-pdf';

export default class App extends React.Component {
  render() {
    const source = { uri: 'http://www.africau.edu/images/default/sample.pdf', cache: true };
    
    return (
      <View style={styles.container}>
        <Pdf
          source={source}
          onLoadComplete={(numberOfPages, filePath) => {
            console.log(`加载完成，共${numberOfPages}页`);
          }}
          onPageChanged={(page, numberOfPages) => {
            console.log(`当前第${page}页，共${numberOfPages}页`);
          }}
          onError={(error) => {
            console.log(error);
          }}
          style={styles.pdf}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    padding: 10,
  },
  pdf: {
    flex: 1,
    width: '100%',
  },
});

这个方法的优势是支持更多PDF操作（比如翻页、缩放、缓存），而且不需要依赖外部服务。

为什么原代码在Android失效？ #

Android系统的WebView（尤其是Android 7.0以下的版本）没有内置PDF渲染引擎，无法直接解析PDF文件；而iOS的WKWebView（也就是你启用的useWebKit={true}）原生支持PDF的渲染，所以iOS端能正常显示。

内容的提问来源于stack exchange，提问作者Hasan Rıza Uzuner