gpt4 book ai didi

android - React-Native Webview 无法在 iOS 中正常加载 android 中的 ppt、xls、doc 文件

转载 作者:行者123 更新时间:2023-12-04 23:55:34 25 4
gpt4 key购买 nike

React-Native Webview 无法在 iOS 中正常加载 android 中的 ppt、Xls 或 doc 文件。

在Android中,它会下载文件,不会在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
}} />

请对以上内容有任何想法!

最佳答案

假设您使用的是 react-native-webview,不幸的是,这是 android 上的默认行为,您无法更改此行为,因为即使是 chromium 浏览器也会下载该文件显示它。您可以在github上查看此相关问题

一种解决方案是使用 google docs viewer 创建一个组件来处理此问题,它允许您在将文件链接传递给它的同时预览文档。

  1. 所以 .. 首先创建一个名为 FileViewer 的组件来检查平台并使用 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. 接下来将其导入到您的 App.js 或任何您需要的地方:

    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 以确保一切正常。

关于android - React-Native Webview 无法在 iOS 中正常加载 android 中的 ppt、xls、doc 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72571821/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com