React Native WebView在安卓设备上无法显示PDF和Word文件

Question

React Native WebView在安卓设备上无法显示PDF和Word文件

9

我正在开发一个有关发布个人简历的新项目。

我需要在应用程序中展示用户的简历。

我的标准 WebView 代码如下，在 iOS 上运行良好。

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


export default class App extends React.Component {
  render() {
    return (
      <WebView
            style={{flex: 1, backgroundColor: 'white'}}
            source={{
              uri: 'http://www.africau.edu/images/default/sample.pdf',
            }}
            bounces={true}
            useWebKit={true}
            scrollEnabled={true}
          />
    );
  }
}

这段代码还需要在Android设备上运行。但是，当我在Android设备上尝试运行时，页面显示为空。

您可以在Expo Snack上尝试此代码。

- Hasan Rıza Uzuner

4个回答

4

我选择了方案二，但遇到了Google文档查看器错误，因此我使用了这个hacky的方法来检查是否在加载时没有内容以便刷新网页视图。

const retries = 10

const PdfViewerScreen = ({ route, navigation }: Props) => {
  const { pdfUrl } = route.params || {}
  const webview = useRef(null)
  const [tries, setTries] = useState(1)
  const [reset, setReset] = useState(Date.now())

  const isAndroid = Platform.OS === 'android'
  const base = !isAndroid
    ? ''
    : 'https://docs.google.com/gview?embedded=true&url='

  // Use date as reset to be able to 
  // reload the webview
  const uri = `${base}${pdfUrl}?t=${reset}`

  // Js code to get baseURI when 
  // webview is loaded. docs.google.com has a bug
  // where no content is returned.
  const myInjectedJs = `    
    (function(){ 
      window.ReactNativeWebView.postMessage(window.document.baseURI);
    })();`

  const onMessage = (event: WebViewMessageEvent) => {
    // Issue does not occur in iOS
    if(!isAndroid) return

    const baseURI = event.nativeEvent.data
    if (tries === retries) navigation.goBack()

    if (baseURI !== uri) {
      setReset(Date.now())
      setTries(tries + 1)
    }
  }

  return (
    <>
      <WebView
        ref={webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
        style={tailwind(`flex-1`)}
        injectedJavaScript={myInjectedJs}
        source={{ uri }}
        onMessage={onMessage}
        renderLoading={() => (
          <View style={tailwind('w-full h-full')}>
            <Loading />
          </View>
        )}
      />
    </>
  )
}

- itdoesntwork

0

针对Android：如果要从URL查看PDF文件，则以下解决方案适用于我。

好处是它带有默认控件，如缩放、下一页等

导入react-native-webview作为

import { WebView } from 'react-native-webview';

<WebView style={{ height: 500, width: 350 }} nestedScrollEnabled={true} source={{ uri: 'https://drive.google.com/viewerng/viewer?embedded=true&url=http://www.africau.edu/images/default/sample.pdf' }} />

注意：必须添加高度和宽度，否则将被隐藏{{link1：输入图像描述

}}。

- Rohit Parte

-1

使用此链接在Webview中显示pdf/doc文件（适用于Android）。

https://drive.google.com/viewerng/viewer?embedded=true&url={your pdf url}’

- faizullah ccjk

1

欢迎提供解决方案的链接，但请确保您的答案在没有链接的情况下也是有用的：添加链接周围的上下文，以便您的同行用户会对其内容和目的有一些了解，然后引用您链接页面中最相关的部分，以防目标页面无法访问。那些只有链接而没有更多实质内容的答案可能会被删除。 - Daniel Widdis

这在 EXPO React Native 应用程序上正常工作。 - Rohit Parte

在我的那一端运行正常。它是如何工作的？它安全吗？ - Riku

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aytek · Accepted Answer

Android Webview无法显示PDF文件，这个问题是有解决方法的。您可以从此链接查看。

有多种解决方案可供选择，您可以选择最相关的一个。

1）使用react-native-pdf-view

2）使用Google文档作为查看器。尝试在您的Webview中加载此URL：http://docs.google.com/gview?embedded=true&url=http://www.africau.edu/images/default/sample.pdf

3）使用Chrome自定义选项卡。