React-Native Webview无法在安卓设备中加载ppt、xls、doc文件，但在iOS设备上正常工作。

Question

React-Native的Webview无法在安卓中加载ppt、xls或doc文件，但在iOS中正常工作。在安卓中，它会下载文件，但不会在webview中显示内容。

<WebView
      javaScriptEnabled={true}
      originWhitelist={['*']}
      scalesPageToFit={false}
      source={{
        uri: `https://www.cmu.edu/blackboard/files/evaluate/tests-example.xls`
        //doc 
        // uri:`https://calibre-ebook.com/downloads/demos/demo.docx
      }} />

请问您对以上内容有什么想法？

- Nensi Kardani

---

我也遇到了同样的问题。 - sabarikobagapu

Answer 1

假设您正在使用 react-native-webview，不幸的是这是 Android 上的默认行为，因此即使使用 Chromium 浏览器，它也会下载文件而不是显示它，您无法改变这种行为。 您可以在GitHub上查看相关问题。 一个解决方案是创建一个组件来处理这个问题，使用 Google Docs Viewer 来预览一个文档，同时将文件的链接传递给它。

1. So .. first create a component called FileViewer to check platform and use google docs viewer :

   import {WebView} from 'react-native-webview';
   import {Modal, View, Text, StyleSheet, Platform} from 'react-native';
   
   export default function FileViewer(props) {
     let webViewUrl;
     let _webView;
     let url = props.url;
   
     /**Get the extention of file */
     let ext;
     if (url) {
       const URL = url.split('?');
       ext = URL[0].split('.').reverse()[0];
     }
   
     /**Check for the extention of file and platform */
     if (
       ext === 'pdf' ||
       ext === 'doc' ||
       ext === 'docx' ||
       ext === 'xls' ||
       ext === 'ppt'
     ) {
       if (Platform.OS === 'android') {
         url = encodeURIComponent(url);
         webViewUrl = `https://docs.google.com/viewerng/viewer?url=${url}`;
       }
     } else {
       webViewUrl = props.url;
     }
   
     if (url) {
       _webView = <WebView source={{uri: webViewUrl}} />;
     } else {
       _webView = <Text>No url found!</Text>;
     }
   
     return (
       <View style={styles.webView}>
         <Modal
           animationType={'slide'}
           transparent={false}
           visible={props.isVisible}>
           {props.showTransparentView ? (
             <View transparent style={styles.transparentView} />
           ) : null}
           {_webView}
           <View style={styles.button}>{props.children}</View>
         </Modal>
       </View>
     );
   }
   const styles = StyleSheet.create({
     webView: {
       flex: 1,
     },
     button: {
       backgroundColor: '#fff',
       position: 'absolute',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
       right: 10,
       bottom: 10,
       borderRadius: 100,
       width: 70,
       height: 70,
     },
     transparentView: {
       zIndex: 1,
       height: 60,
       position: 'absolute',
       flex: 1,
       width: 100,
       right: 0,
     },
   });```
   
   
   
   
   

2. Next import it in your App.js or wherever you need it like so:

   import React from 'react'; 
   import FileViewer from './components/FileViewer';
   
   
   const App = () => {
     const url = 'https://calibre-ebook.com/downloads/demos/demo.docx';
     return (
       // <WebView source={{uri: 'https://infinite.red'}} style={{marginTop: 20}} />
   
       <FileViewer url={url}></FileViewer>
     );
   };
   
   export default App;
   
   
   

现在，您应该能够预览文件而不是直接下载。

请注意我正在使用Linux平台，并且此方法在Android上运行良好，请检查iOS以确保一切正常。

- WaLid LamRaoui

---

WaLid LamRaoui，感谢您的帮助！现在我能够使用我的答案进行加载了。 - Nensi Kasundra

不用谢，我已经看了你的回答，真是太棒了！我本来还想创建一个组件来处理这个行为，但你使用了一个漂亮的三元条件运算符来传递URI。如果你不需要一遍又一遍地使用它，那么你的方法就非常干净和聪明 :) 祝你有美好的一天。 - WaLid LamRaoui

是的，这非常简洁明了！谢谢你的帮助！ - Nensi Kasundra

Answer 2

以下代码对我来说运行良好：

根据平台，在webview中加载URL。

iOS：直接加载URL

Android：我正在附加办公应用程序的URL，以便根据文件类型进行加载。

let url ="https://www.cmu.edu/blackboard/files/evaluate/tests-example.xls"

<WebView
   ref={webViewDocRef}
   javaScriptEnabled={true}
   domStorageEnabled={true}
   scalesPageToFit={false}
   source={{ uri: Platform.OS=="ios" 
          ? url
          : `https://view.officeapps.live.com/op/view.aspx?src=${url}`
}} />
 

- Nensi Kasundra