React-Native Webview not able to load ppt, xls, doc file in android in iOS working properly

Question

React-Native Webview cannot load ppt, Xls, or doc files in android in iOS working properly.

In Android, it will download the file, It will not display the contents in the 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
      }} />

Any thoughts on above one please!

Answer 1

Below Code is working fine for me:

I am loading the URL in webview according to Platfrom.

For iOS: directly loading URL

For Android: I am appending the office apps URL so it will load according to a type of file.

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}`
}} />
 

Answer 2

Assuming that you're using react-native-webview, Unfortunatelly this is the default behavior on android and there is nothing you can do to change this behavior since even chromium browser will download the file instead of displaying it. You can check this related issue on github

One solution is to create a component to handle this by using google docs viewer which allows you to preview a document while passing the link of a file to it.

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;
   
   
   

By now you should able to preview the files instead of direct download.

Note I'm on linux and this worked fine for android .. so you may need to check ios to ensure things work properly.